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 和 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 >28 和 Opera >14，并删除了 translate3d(0, 0, 0) 转换，该转换搞砸了 Chrome 的重绘，但保留了 Safari 的 CSS 硬件加速。