我们已将使用 Adobe After Effects Bodymovin 插件创建的 SVG/JS 动画从一个 Wordpress 站点移动到另一个站点。在旧站点(遗憾的是我无法向您展示)上，动画效果完美无缺。在新站点上，根据浏览器窗口的大小，动画中包含一些故障，这些故障似乎是由动画 mask 中的某种舍入错误引起的。
在地球的一个或多个边缘上，您偶尔会(取决于视口(viewport)宽度)看到一个像素宽的滚动背景图形出现。见图片。
我已经在 CodePen 中隔离了动画。它工作正常here ，无论视口(viewport)设置为多大。
但是，当我引入像这样的一小段 CSS 时......
margin: 0 auto;
width: 70%;
...进入父 DIV 的样式，故障开始发生。 See here .
在原始动画中， mask 比地球的边缘延伸得更远，所以我怀疑 mask 现在刚好到达地球的边缘这一事实是某种 Bodymovin 优化。
鉴于这不会发生在旧网站上，我怀疑有某种 CSS，或者 Bodymovin 中的设置可以阻止这种情况发生。
Wordpress 网站是用 Divi 构建的，动画位于一个 DIV 中，该 DIV 嵌套在许多其他 DIV 中(即，一个模块位于一列中，一行中位于一个部分中)，并且这些 DIV 中的大多数都设置了宽度到各种百分比。所以我不认为解决方案在于简化 CSS。
有没有人遇到过这样的问题？或者有可能有助于消除它的建议？
我还创建了一个 Issue在 Bodymovin GitHub 页面上，但那里的响应时间似乎差异很大。
最佳答案
我已经在 codepen 上做了一些测试，当我删除它时能够让它工作
transform: translate3d(0px, 0px, 0px);
所以删除这行脚本应该可以解决问题
this.svgElement.style.transform="translate3d(0,0,0)")
当 svg 已经自动转换时，你为什么要尝试转换它。
如果您仍想保留边距和宽度 % 的设置，这是一个可能的解决方法。
关于javascript - 父 DIV 的 CSS 干扰 SVG 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54317199/