父 DIV 的 CSS 干扰 SVG 动画

Question

我们已将使用 Adobe After Effects Bodymovin 插件创建的 SVG/JS 动画从一个 Wordpress 站点移动到另一个站点。在旧站点（遗憾的是我无法向您展示）上，动画效果完美无缺。在新站点上，根据浏览器的大小 window，动画包含一些故障，这些故障似乎是由动画蒙版中的某种舍入错误引起的。

在地球的一个或多个边缘上，您偶尔会（取决于视口宽度）看到一个像素宽的滚动背景图形。见图。

我已经在 CodePen 中隔离了动画。它工作正常 here，无论视口设置成什么大小。

但是，当我介绍这个 CSS 的一小部分时...

margin: 0 auto;
width: 70%;

... 进入父级 DIV 的样式，故障开始发生。 See here.

在原始动画中，蒙版比地球的边缘延伸得更远，所以我怀疑蒙版现在刚好到达地球的边缘这一事实是某种 Bodymovin 优化。

鉴于这不会发生在旧站点上，我怀疑有某种 CSS，或者 Bodymovin 中的设置可以阻止这种情况发生。

Wordpress 网站是用 Divi 构建的，动画位于一个 DIV 中，嵌套在许多其他 DIV 中（即一个模块位于一列中，位于一行中，位于一个部分中)，并且这些 DIV 中的大多数都将宽度设置为不同的百分比。所以我不认为解决方案在于简化 CSS.

有没有人遇到过这样的问题？或者有可能有助于消除它的建议？

我还在 Bodymovin GitHub 页面中创建了一个 Issue，但是那里的响应时间似乎相差很大。

Answer 1

您可以通过为 #container 指定宽度（以像素为单位）来避免此问题，百分比的响应有时会导致像素略有偏差。如果您需要为其他屏幕尺寸设置不同的尺寸，请使用媒体查询。

#container {
  margin: 0 auto;
  width: 400px;
}

Answer 2

我已经在 codepen 上进行了一些测试，当我删除

时能够让它工作

transform: translate3d(0px, 0px, 0px);

所以删除这行脚本应该可以解决问题

this.svgElement.style.transform="translate3d(0,0,0)")

你为什么要尝试转换 svg，它已经自动转换了。

如果您仍想保留边距和宽度 % 的设置，这是一个可能的修复方法。

父 DIV 的 CSS 干扰 SVG 动画

Parent DIV's CSS interferes with SVG animation

javascript

css

svg

bodymovin