Html Webkit模糊变换在其他变换后旋转/倾斜

Chrome中的渲染似乎存在一些问题。我使用反向子容器漫游/倾斜容器，以获得倾斜的顶部和底部

当我放置HTML视频或使用其他CSS转换的滑块时，内容和下面的HTML变得模糊

在Chrome中是否有解决方法

演示：

HTML

结果：

---

@turnip，不太清楚为什么这一个是重复的？@TemaniAfif变换会导致webkit中的模糊。我试着用各种不同的解决方案来选择一些复制品。模糊的原因是一样的。@Turnip我没有看到另一个；）我只看到了第一个。。。顺便说一下，我们可以避免所有这些与简单的线性梯度和多重背景

<div class="article skew">
  <div class="content skew-inverse">
    <div class="image-background"></div>
      <!-- Content Elements !-->
  </div>
</div>

.article {
  transform: skewY(3deg);
}


.content {
  transform: skewY(-3deg);
}