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 中看起来一样）：

这是在 Chrome 中使用 CSS 硬件加速时的样子：

理想情况下，我需要要么 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，并删除了搞砸 Chrome 重绘的 translate3d(0, 0, 0) 转换，但保留了CSS Safari 的硬件加速。

CSS：启用 Webkit 硬件加速在 Safari 中运行良好，在 Chrome 中出现问题

CSS: Enabling Webkit hardware acceleration works fine in Safari, messes up in Chrome

css

google-chrome

safari

clip-path