CSS：启用Webkit硬件加速在Safari中运行良好，在Chrome中搞砸了

Question

我正在使用响应大小的SVG clipPath来屏蔽具有图像背景的固定位置div。这一切都运行良好（Firefox，Chrome，IE和Opera），直到我指出它在Safari中失败了。几个小时后，我意识到Safari只是将SVG clipPath应用到它应该的三个div中的一个。我在Bing上搜索了它，发现this question这基本上是相同的，但没有答案;只是评论尝试强制CSS硬件加速（-webkit-transform:translateZ(1px) / -webkit-transform:translate3d(0, 0, 0)）。

我做到了， POW！它完全适用于Safari ...但现在看起来完全搞砸了Chrome。这就好像重新粉刷完全没有了（我向上和向下滚动，每次Chrome中扭曲，波涛汹涌的效果都不同）。

问题在于Chrome和＆amp; Safari是基于WebKit的，所以我猜供应商前缀并不能真正帮助我吗？

供参考，以下是应该的样子（来自FF的截图，目前在Safari中看起来相同）：

以下是使用CSS硬件加速在Chrome中的外观：

理想情况下，我需要a）在Chrome中停止糟糕的重绘问题，或者b）找到clipPath的替代修复，而不是在Safari中使用多个元素。

Answer 1

虽然它是位 hacky，但我在BrowserHacks上找到了针对Chrome的@supports查询：

@supports (-webkit-appearance:none) {
    #introwrapper .slide:not(:last-child) {
        -webkit-transform:                  none;
    }
}

此@supports查询仅针对Chrome＆gt; 28和Opera＆gt; 14，并删除了导致Chrome重新绘制的translate3d(0, 0, 0)转换，但保留了Safari的CSS硬件加速。