CSS变换产生闪烁在Safari，但只有当浏览器是> = 2000像素宽(CSS Transf

你看的没错。在办公室里多台计算机上进行测试和场景之间的唯一区别是浏览器的大小。的同事，把范围缩小到一个2000像素的甜蜜点。罗和看哪当我们每个调整我们的浏览器为> = 2000像素宽和鼠标移到与页面上的转换的动画的各种元素的元素 - 特别是与一个CSS渐变背景的任何元素 - 闪烁。相反，如果调整浏览器是<2000像素宽和鼠标移到无闪烁发生时相同的元素。

其他人看到这种奇怪的行为？为什么是2000像素一个神奇的数字，在2000像素到底发生了什么？

注 -我真的不能共享截图/视频/的链接，这个网站是尚未公开，并且代码相当不必要的，因为这似乎是更多的是浏览器的问题比什么的。

注2 -在这里我的问题是真正围绕究竟在Safari在2000像素发生，不一定如何解决与颤动backface-visibility或translateZ等。原因是，我们使用-webkit-font-smoothing: subpixel-antialiased; 宽松整个网站和使用任何这些技巧的王牌，物业整个页面，开启抗锯齿/灰阶所有文本。

编辑-好吧，抱歉没有做这点。这里是一个的jsfiddle一些代码应该重现该问题： http://jsfiddle.net/brandondurham/ujPMK/embedded/result/

请记住，Safari浏览器已被设置到至少2000像素宽要做到这一点。

Answer 1:

令人沮丧的是吧？

见EDIT4的答案为什么是2000像素幻数。

有几件事情你可以试试。

添加-webkit-transform-style: preserve-3d; 到被闪烁的元素。
加上-webkit-backface-visibility: hidden; 到属于元素
闪烁。
移动动画元素的父的闪烁的外
元件内。

编辑 -韦斯利海尔斯说，这里 “应用硬件加速到已经加快了页面的部分，当我遇到出问题的行为”

它的努力帮助您调试这一点没有任何代码。但对于初学者，我建议你在Safari中打开调试模式。写“默认写com.apple.Safari IncludeInternalDebugMenu -bool真正的”终端。

在此之后一个调试菜单会显示出来。选择绘图/合成标志>显示合成边界。

这将帮助你看到什么被渲染，并通过选择放什么在硬件加速，什么离开了。

EDIT2 -这是值得一试的还有：快动画与-IOS-的webkit

它对于iOS的，但我已经经历了 - 在某些情况下 - 解决iOS上的工作也适用于OSX。

EDIT3 -如果你只是问个究竟时，其超过2000像素大，我可以告诉你肯定是在iPhone，WebKit的创建纹理是由1024不大于1024，如果你的元素比大，它创建多个纹理。

纹理限制文档

现在，当他们这样做的iPhone，它不会，如果他们做OSX同样让我感到吃惊，但具有更高的极限。

不知道这是不是你的情况寿。不可能说没有任何代码。

EDIT4 - “在TextureMapperTiledBackingStore的实现是非常简单的，并只用于解决在OpenGL的2000×2000纹理尺寸的限制。”

所以，如果你的元素大于2000x2000大它创建多个纹理。

http://trac.webkit.org/wiki/CoordinatedGraphicsSystem

Answer 2:

我发现，应用-webkit-backface-visibility: hidden; 到平移元件和-webkit-transform: translate3d(0, 0, 0); 它的所有儿童，闪烁然后消失。

请参阅上的WebKit的过渡防止闪烁WebKit的变换。

Answer 3:

如果字体闪烁使用下面的CSS：

html,body {
    -webkit-font-smoothing: antialiased;    
}

Answer 4:

我注意到，应用CSS3后转换元件在Chrome看起来有点“脆”和文本对齐。在马蒂亚斯答案解决方案对此没有任何影响。但这里是奇怪的事情-毕竟我已经申请WebKit的过滤器（即-webkit-filter: opacity(0.99999); ），正确地呈现和文本中的字母排列元素。但在那之后的那些元素看起来所迷离了一下。也许这对你的闪动效果。

Answer 5:

首先，由于这里提供的伟大的解决方案。我总是在过去认为一定有什么错我的代码。事实并非如此。我还推断出2000像素边境动画不顺利不再运行。感谢你们我现在加

/*keep animation smooth in Safari above 2000px*/
@media ( min-width: 2000px ) {
    .boxContent {
        -webkit-backface-visibility: hidden;
    }
}

我这样做是有条件，因为，事实上，图片不加渲染后级抗锯齿。在另一个地方，我做了

/*keep animation smooth in Safari above 2000px*/
.twothousand {
    -webkit-backface-visibility: hidden;
}

并加入和通过JQuery除去额外类。因此，过渡平滑，并完成后渲染（再次取出类）有点复杂，但它为我工作得很好，并最终使得动画在Safari以上2000像素平滑。干得好，伙计们！

Answer 6:

一个简单的解决方案，解决了我所有的问题是这样的：

.app * {
  transform-style: preserve-3d;
}

文章来源: CSS Transform causes flicker in Safari, but only when the browser is >= 2000px wide