CSS：启用Webkit硬件加速在Safari中运行正常，在Chrome中混乱 [英] CSS: Enabling Webkit hardware acceleration works fine in Safari, messes up in Chrome

问题描述

我使用响应大小的SVG clipPath来遮蔽具有图像背景的固定位置div。这一切都工作正常（Firefox，Chrome，IE和Opera），直到它指出，它是在Safari失败。几个小时后，我意识到Safari只是应用SVG clipPath 到它应该的三个div之一。我在Bing上搜索，发现：

  @supports（-webkit- appearance：none）{
＃ introwrapper .slide：not（：last-child）{
 -webkit-transform：none; 
} 
} 
  

此 @supports 查询只会定位到Chrome浏览器> 28和Opera> 14，并删除调整Chrome重绘的 translate3d（0，0，0） Safari的CSS硬件加速。

I'm using a responsively-sized SVG clipPath to mask fixed-position divs with image backgrounds. This was all working fine (Firefox, Chrome, IE & Opera) until it was pointed out to me that it was failing in Safari. After several hours, I realised that Safari was only applying the SVG clipPath to one of the three divs it was supposed to. I googled it on Bing and found this question which is essentially the same thing but with no answer; just a comment to try forcing CSS hardware acceleration (-webkit-transform:translateZ(1px) / -webkit-transform:translate3d(0, 0, 0)).

I did that, and POW! it totally works for Safari... but now looks utterly messed up in Chrome. It's as if the repainting has gone totally out of whack (I scroll up and down, and the distorted, choppy effect in Chrome is different every time).

The problem is that both Chrome & Safari are WebKit-based, so I guess vendor prefixes aren't really going to help me here?

For reference, here's how it should look (screenshot from FF, currently looks the same in Safari):

And here's how it looks in Chrome with CSS hardware acceleration:

Ideally, I need to either a) stop the awful repaint issue in Chrome, or b) find an alternate fix for the clipPath not working on multiple elements in Safari.

解决方案

Although it is a bit hacky, I found a Chrome-specific @supports query on BrowserHacks:

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

This @supports query only targets Chrome >28 and Opera >14, and removes the translate3d(0, 0, 0) transform that was screwing up Chrome's repaints, but retains the CSS hardware acceleration for Safari.

这篇关于CSS：启用Webkit硬件加速在Safari中运行正常，在Chrome中混乱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！