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

Question

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

当我放置使用其他CSS转换的HTML视频或Slider时，内容和以下HTML会变得模糊。

是否有任何变通方法可以在Chrome中解决此问题？

演示： https://codepen.io/anon/pen/BxBpKw

HTML

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

CSS：

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


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

结果：