嵌入式CSS动画的SVG在iOS10和iOS11之间表现不同

时间:2017-09-25 10:36:09

标签: css animation svg

我有一个基本的SVG日志,并且嵌入其中我有一些简单的CSS动画。它正在旋转一个物体,并使旋转的中间成为物体的中心。

它在iOS10中的Chrome / Safari上看起来很好用,但是当你在iOS11 Safari中打开它时,旋转完全是疯了。

任何人都可以帮忙建议为什么/如何适应它?

这里可以看到徽标:

http://www.mediplacements.com/live2/img/logotest.svg

1 个答案:

答案 0 :(得分:0)

如果某些看似标准的内容适用于较旧的浏览器,而不适用于较新的浏览器,则应检查您的元素是否符合标准。 W3C验证器indicates SVG中有3个错误;你应该在修好之后再试一次。

编辑:好的,现在它已经修好了。你检查过SVG animation bug in safari 11了吗? 我刚刚尝试了链接问题中的建议,并修复了它。 只需添加transform-b​​ox:fill-box;你的Swishes' CSS。

它告诉Safari在标准的未定点上表现得像Chrome,即变换百分比值是指边界框还是父级。

仅供参考,您描述的问题也发生在Firefox上。