父级DIV的CSS会干扰SVG动画

Question

我们已经将使用Adobe After Effects Bodymovin插件创建的SVG / JS动画从一个Wordpress网站移动到了另一个网站。在旧网站上（我很遗憾无法向您显示），该动画可以完美播放。在新站点上，取决于浏览器窗口的大小，该动画包含的毛刺似乎是由动画蒙版中的某种舍入错误引起的。

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

我已经在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已经自动转换时，为什么要尝试对其进行转换。

如果您仍想保留边距和宽度％的设置，则可能会解决此问题。