Html transform:translate（）在safari中的行为不正确_Html_Css

Html transform:translate（）在safari中的行为不正确

html css

Html transform:translate（）在safari中的行为不正确,html,css,Html,Css,我正在使用transform:translate（%here）；为循环过渡设置动画。基本上我有三个项目在一行，我转移第一和第三。除了在safari和移动设备中，该代码工作正常。在safari中，transform:translate（%here）的值似乎a）不正确，动画变得疯狂，b）例如，在切换选项卡之前，动画甚至不会启动。这是密码和密码 HTML 页面标题 CSS: .tape-1.center{ 左：12%；宽度：15%； -webkit动画：轻松滑下3.9秒； -moz动画：轻松滑下3.

我正在使用transform:translate（%here）；为循环过渡设置动画。基本上我有三个项目在一行，我转移第一和第三。除了在safari和移动设备中，该代码工作正常。在safari中，transform:translate（%here）的值似乎a）不正确，动画变得疯狂，b）例如，在切换选项卡之前，动画甚至不会启动。这是密码和密码

HTML
页面标题
CSS:
.tape-1.center{
左：12%；
宽度：15%；
-webkit动画：轻松滑下3.9秒；
-moz动画：轻松滑下3.9秒；
-o型动画：滑下3.9秒轻松；
动画：滑下3.9秒轻松；
-webkit动画迭代计数：无限；
-moz动画迭代次数：无限；
-o-动画-迭代-计数：无限；
动画迭代计数：无限；}
.tape-2.center{
/*-webkit动画：滑入2 3.9秒轻松*/
/*动画迭代次数：无限*/
转化：translateX（284%）；
-webkit动画迭代计数：无限；
}
.tape-3.center{
左：73.3366%；
宽度：15%；
-webkit转换来源：50%；
-webkit动画：轻松向上滑动3.9秒；
-moz动画：向上滑动3.9秒；
-o型动画：向上滑动3.9秒；
动画：向上滑动3.9秒；
-webkit动画迭代计数：无限；
-moz动画迭代次数：无限；
-o-动画-迭代-计数：无限；
动画迭代次数：无限；
}
@-webkit关键帧向下滑动{
0% {
-webkit转换：translateY（0%）；
-moz变换：translateY（0%）；
-ms转换：translateY（0%）；
-o变换：translateY（0%）；
转化：translateY（0%）；
}
33.3% {
/*转化：translateY（105%）*/
-webkit转换：translateY（105%）；
-moz变换：translateY（105%）；
-ms转换：translateY（105%）；
-o变换：translateY（105%）；
转化：translateY（105%）；
}
66.6%{
/*转化：translateX（490%）；
转化：translateY（105%）*/
/*转化：翻译（410.9%，105%）*/
-webkit转换：翻译（410.9%，105%）；
-moz变换：翻译（410.9%，105%）；
-ms转换：翻译（410.9%，105%）；
-o变换：翻译（410.9%，105%）；
转化：翻译（410.9%，105%）；
}
100% {
/*转化：翻译（410.9%，0%）*/
-webkit转换：翻译（410.9%，0%）；
-moz变换：翻译（410.9%，0%）；
-ms转换：翻译（410.9%，0%）；
-o变换：翻译（410.9%，0%）；
转化：翻译（410.9%，0%）；
}
}
@-webkit关键帧向上滑动{
0% {
转换：翻译（0%，0%）；
}
33.3% {
转化：translateY（-105%）；
}
66.6%{
转换：翻译（-410.7%，-105%）；
}
100% {
转换：翻译（-410.7%，0%）；
}
}
/*容器数据*/
.svg包装器{
宽度：100%；
/*你想要什么宽度都行*/
显示：内联块；
位置：相对位置；
}
.svg包装器：之后{
垫面：80.7%；
/*16:9比率*/
显示：块；
内容：''；
}
.svg容器{
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
/*填充父对象*/
背景色：红色；
/*让我们看看*/
颜色：白色；
边界半径：5px；
溢出：隐藏；
-webkit动画：磁带-1
}
.磁带{
位置：绝对位置；
最高：34.5%；
}

只需复制粘贴它并替换

data=“assets/piece.svg”

在您的文件系统上使用一些svg文件

我不确定这种行为的原因是什么。如果我在两个选项卡之间切换并返回此代码，则动画正在工作。如果我锁定手机并解除锁定，动画就会神奇地开始工作。你知道我错过了什么吗？

复制粘贴并替换。。。相反，为什么不制作一个JSFIDLE，或者更好，将其嵌入到问题中的一个片段中呢？我不知道错误行为的原因是什么。这可能是使用了。引用外部svg文件与本地svg文件有些不同。我希望这能证实我的决定。但是你是对的，让我们排除一些可能性。我的错误，引用外部源是完全相同的。

HTML
<html>
    <head>
        <title>Page Title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1.0">
        <link rel="stylesheet" href="anim.css">
    </head>

    <body>

                <div class="svg-wrapper">
                  <div class="svg-container second">

                <object class="tape tape-1 center"  width="15%" type="image/svg+xml" data="http://srufaculty.sru.edu/david.dailey/svg/newstuff/circles3.svg"></object>
                <object class="tape tape-2 center"  width="15%" type="image/svg+xml" data="http://srufaculty.sru.edu/david.dailey/svg/newstuff/circles3.svg"></object>
                <object class="tape tape-3 center"  width="15%" type="image/svg+xml" data="http://srufaculty.sru.edu/david.dailey/svg/newstuff/circles3.svg"></object>

                  </div>
              </div>

    </body>
</html>

CSS:

.tape-1.center{
    left:12%;
    width:15%;
       -webkit-animation: slide-down 3.9s ease;
    -moz-animation: slide-down 3.9s ease;
    -o-animation: slide-down 3.9s ease;
    animation: slide-down 3.9s ease;
    -webkit-animation-iteration-count: infinite; 
    -moz-animation-iteration-count: infinite; 
    -o-animation-iteration-count: infinite; 
    animation-iteration-count: infinite;}
.tape-2.center{

    /*-webkit-animation: slide-in-2 3.9s ease;*/
    /*animation-iteration-count: infinite;*/
    transform: translateX(284%);
    -webkit-animation-iteration-count: infinite;  
}
.tape-3.center{
    left:73.3366%;
    width:15%;
    -webkit-transform-origin: 50%;
    -webkit-animation: slide-up 3.9s ease;
    -moz-animation: slide-up 3.9s ease;
    -o-animation: slide-up 3.9s ease;
    animation: slide-up 3.9s ease;
    -webkit-animation-iteration-count: infinite; 
    -moz-animation-iteration-count: infinite; 
    -o-animation-iteration-count: infinite; 
    animation-iteration-count: infinite;
}


@-webkit-keyframes slide-down {
  0% {
    -webkit-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -ms-transform: translateY(0%);
    -o-transform: translateY(0%);
    transform: translateY(0%);


  }
  33.3% {
    /*transform: translateY(105%);*/
    -webkit-transform: translateY(105%);
    -moz-transform: translateY(105%);
    -ms-transform: translateY(105%);
    -o-transform: translateY(105%);
    transform: translateY(105%);
  }
  66.6%{

        /*transform: translateX(490%);
        transform: translateY(105%);*/
        /*transform: translate(410.9%,105%);*/

    -webkit-transform: translate(410.9%,105%);
    -moz-transform: translate(410.9%,105%);
    -ms-transform: translate(410.9%,105%);
    -o-transform: translate(410.9%,105%);
    transform: translate(410.9%,105%);

    }
  100% {

    /*transform: translate(410.9%,0%);*/

    -webkit-transform: translate(410.9%,0%);
    -moz-transform: translate(410.9%,0%);
    -ms-transform: translate(410.9%,0%);
    -o-transform: translate(410.9%,0%);
    transform: translate(410.9%,0%);
  }
}

@-webkit-keyframes slide-up {
  0% {
    transform: translate(0%,0%);
  }
  33.3% {
    transform: translateY(-105%);

  }
  66.6%{
        transform: translate(-410.7%,-105%);
    }
  100% {
    transform: translate(-410.7%,0%);
  }
}

/*CONTAINER DATA*/
.svg-wrapper {
  width: 100%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
}
.svg-wrapper:after {
  padding-top: 80.7%;
  /* 16:9 ratio */
  display: block;
  content: '';
}
.svg-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  /* fill parent */
  background-color: red;
  /* let's see it! */
  color: white;
    border-radius: 5px;
    overflow: hidden;
    -webkit-animation: tape-1
}

.tape{
    position: absolute;
    top:34.5%;  

}