javascript - 父 DIV 的 CSS 干扰 SVG 动画

Question

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

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

我已经在 CodePen 中隔离了动画。无论视口设置为什么大小，它在这里都可以正常工作。

然而，当我介绍这样一点点 CSS 时......

margin: 0 auto;
width: 70%;

...进入父 DIV 的样式，故障开始发生。见这里。

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

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

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

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

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

我已经对 codepen 进行了一些测试，并且在我删除时能够使其工作

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

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

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

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

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

2 回答 2