0

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

我做到了，战俘！它完全适用于 Safari ......但现在在 Chrome 中看起来完全一团糟。就好像重新绘制完全不正常（我上下滚动，Chrome 中扭曲的、波涛汹涌的效果每次都不同）。

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

作为参考，它的外观如下（FF 截图，目前在 Safari 中看起来相同）：

在此处输入图像描述

下面是它在带有 CSS 硬件加速的 Chrome 中的外观：

在此处输入图像描述

理想情况下，我需要 a) 停止 Chrome 中可怕的重绘问题，或者 b) 为clipPathSafari 中的多个元素不工作找到替代修复。

4

1 回答 1

0

虽然有点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 硬件加速。

于 2015-06-26T18:23:31.503 回答