Question

我希望你星期五晚上到目前为止很棒！

我在Safari中碰到了一个非常奇怪的错误，我会在这里告诉你这个故事：

几个月前，我从我的网络开发人员老师那里获得了一个使用现代和先进的网络技术制作网站的一个分配，并且我为代码编辑器做了一个重新设计的登陆页面＆＃39; Coda＆＃39 ;。它到目前为止一直很好，但几天前我为SVG文件实现了一个@Keyframe动画。它在我的Mac上的Coda中运行得很好，但在Safari中却没有？我首先想到我在某个地方犯了一个错误，但我已经添加了带有和不带-webkit-前缀的@Keyframes，然后我看到它在我的移动设备上也没有工作......我＆＃ 39;这里显示我的代码：

@-webkit-keyframes color_change {
0% { fill: #41B9D1; }
20% { fill: #9BFF1B; }
40% { fill: #F27E18; }
60% { fill: #FFD700; }
80% { fill: #FF0066; }
100% { fill: #41B9D1; }
}

@keyframes color_change {
0% { fill: #41B9D1; }
20% { fill: #9BFF1B; }
40% { fill: #F27E18; }
60% { fill: #FFD700; }
80% { fill: #FF0066; }
100% { fill: #41B9D1; }
}

@-webkit-keyframes color_change_2 {
0% { fill: #127093; }
20% { fill: #FF0066; }
40% { fill: #FFD700; }
60% { fill: #F27E18; }
80% { fill: #9BFF1B; }
100% { fill: #127093; }
}

@keyframes color_change_2 {
0% { fill: #127093; }
20% { fill: #FF0066; }
40% { fill: #FFD700; }
60% { fill: #F27E18; }
80% { fill: #9BFF1B; }
100% { fill: #127093; }
}

#Shape2 { /* SVG path I'm changing the fill on */
-webkit-animation: color_change 10s infinite alternate;
animation: color_change 10s infinite alternate;
}

#Shape3 { /* the other SVG path I'm changing the fill on */
-webkit-animation: color_change_2 10s infinite alternate;
animation: color_change_2 10s infinite alternate;
}

现在到了奇怪的部分，动画在除了MY之外的任何其他设备上都可以正常运行..其中包括iPhone 6和全新的iPad Pro 9.7＆＃34;运行iOS 9.3.1以及运行带有Safari 9.1的OS X 10.11.4的rMBP。我已经在其他4款iPhone（4S，5C，6S）上对该网站进行了测试，所有这些都运行良好。虽然，5C第一次运行动画，现在拒绝像我一样玩它（尽管我的从来没有显示过它。

我确保动画单独工作，@ Keyframes在所有设备上都能正常工作，但只有我个人在这个网站上有这个问题...我已经测试过是否启用了私有模式。值得一提的是，它在第三方浏览器（如Puffin和iCab）中运行良好，而且当我在不同的应用程序中使用Safari View Controller打开它时......

有没有人知道发生了什么？如果需要，我可以下载网站的网址，因为我不想公开发布。

谢谢！

Safari中的奇怪的关键帧错误

0 个答案: