CSS变换:转换X动画渲染问题

Question

首先让我解释一下问题，然后再解释我试图解决的问题。包括有效的东西，但性能不是很好，因此我提出了这个问题。

问题是，当使用translateX (或translateY)对元素进行动画处理时，它的一部分根本不会被渲染。这对于CSS动画和CSS过渡是正确的。仅出现在大型元素上。

在300vw (动画元素的宽度)时，很少出现这种情况。在700vw时，总是会发生这种情况。

Example with 300vw Example with 700vw

在这两种情况下，有问题的元素都是伪元素，并且是100% - 100vw的translateX (以始终保持可见)

下面是该伪元素的CSS，这是复制该元素所需的所有代码(并将svg_divider类提供给容器)；

​

.svg_divider{
overflow:hidden;
position:relative;
}
.svg_divider::before{ 
content:'';
position: absolute;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat;   
bottom: -0.1vw;
left: -0.1vw;
right: -600.1vw;
top: -0.1vw; 
animation: 4s infinite alternate animateHorShape linear;
background-position: 50% 100%;
background-size: 100% 90px;   background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" preserveAspectRatio="none"><path fill="%23fbd8c2" d="M0 32l48 32c48 32 144 96 240 106.7 96 10.3 192-31.7 288-21.4 96 10.7 192 74.7 288 69.4 96-5.7 192-79.7 288-106.7s192-5 240 5.3l48 10.7v192H0z"/><path fill="%23fbd8c2" opacity=".66" d="M0 64l48 16c48 16 144 48 240 48s192-32 288-26.7C672 107 768 149 864 144s192-59 288-80 192-11 240-5.3l48 5.3v256H0z"/></svg>'); 
}
@media (min-width:2100px){
.svg_divider::before{
background-size: 100% calc(2vw + 90px);
}
}


@keyframes animateHorShape {
   100% {
           transform: translateX(calc( -100% + 100vw));
   } 
   }

/* Only for preview*/
.preview{
  display:flex;
  flex-direction:column;
  height:100vh;
}
.preview div{
  flex-grow:1;
}

<div class="preview">
    <div class="svg_divider"></div>
    <div></div>
  </div>

​

在全屏中运行代码片段，以便更好地查看它。你会注意到，在任何滚动事件中，它都会“突然”回到视图中一小段时间。

代码是针对700vw元素的，它总是显示bug (至少在Chrome和Safari中是这样)。

为了让它更好，我尝试了以下方法：

通过使用setInterval函数切换类来更改translateX值，可以使用变换而不是关键帧动画。也存在完全相同的问题。

已尝试通过调度窗口调整大小事件和窗口滚动事件来触发浏览器的强制重绘。没有起作用。

下面的方法可以工作，但性能不是很好

用rAF用JS写的。这样就可以了，没有渲染问题。然而，当页面上有几个CPU时，CPU使用率会达到~60% (CPU设置减慢6倍)。translateX版本仍在~2%。See that rAF version here

直接设置背景位置动画也是可行的。因此，保持形状为100vw，但将其置于背景大小中，然后设置背景位置动画。类似的问题，表现不好，动画不流畅。

在这方面的任何帮助都将非常感谢。

干杯

Answer 1

最终解决了这个问题。以下是我的理解和解决方案：

浏览器呈现视图中的元素。因此，如果你有一些较大的东西离开了视口，浏览器不会费心渲染不在视图中的部分。这一切都很好，而且理应如此。

在我的情况下，这意味着你在那一页上看到的.该形状不会被渲染，因此它会在某一时刻“停止”。

这是因为CSS变换不会呈现内容，它会转换已经呈现元素。这就是它如此高效和性能如此之好的原因。然而，这导致了大元素的bug。

但是，通过让所有元素从一开始就在视口中(宽度约为100vw)，然后通过transform scaleX (100)对其进行拉伸，所有形状都会被考虑在内，因为它最初是由浏览器完全渲染的。

​

.svg_divider {
  overflow: hidden;
  position: relative;
}
.svg_divider::before {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background-repeat: no-repeat;
  bottom: -0.1vw;
  left: -0.1vw;
  right: -0.1vw;
  top: -0.1vw;
  transform-origin: 100% 0;
  transform: scaleX(100);
  animation: 14s infinite alternate animateHorShapee linear;
  background-position: 50% 0%;
  background-size: 100% 90px;
  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none">><path d="M0 .5c3.07.55 9.27-.42 16.14 0 6.88.4 13.75.57 19.14-.11V0H0z" fill="%23FBD8C2"/><path d="M0 1c3.17.8 7.29-.38 10.04-.55 2.75-.17 9.25 1.47 12.67 1.3 3.43-.17 4.65-.84 7.05-.87 2.4-.02 5.52.88 5.52.88V0H0z" opacity=".5" fill="%23FBD8C2"/><g><path d="M0 1.85c2.56-.83 7.68-.3 11.79-.42 4.1-.12 6.86-.61 9.58-.28 2.73.33 5.61 1.17 8.61 1 3-.19 4.73-.82 5.3-.84V.1H0z" opacity=".5" fill="%23FBD8C2"/></g></svg>');
}
@media (min-width: 2100px) {
  .svg_divider::before {
    background-size: 100% calc(2vw + 90px);
  }
}

@keyframes animateHorShapee {
  100% {
    transform: scaleX(100) translateX(98%);
  }
}

    /* Only for preview*/
    .preview{
      display:flex;
      flex-direction:column;
      height:100vh;
    }
    .preview div{
      flex-grow:1;
    }

<div class="preview">
    <div class="svg_divider"></div>
    <div></div>
  </div>

​