CSS3使用chrome / safari来影响其他元素的变换 [英] CSS3 Transform affecting other elements with chrome/safari

问题描述

我有一个问题，我的css3转换影响页面上的其他元素，甚至导致他们的闪烁。我看到另一篇文章，但他们没有解决这个问题。

I have an issue where my css3 transformations are effecting other elements on the page and even causing them to sort of flicker. I saw another post about this but they didn't have a resolution with the issue.

http://scosha.mybigcommerce.com/w107b / 当你滚动导航，你看到一个动画css3转换。它工作正常在firefox没有闪烁，但与chrome和safari的效果非常明显，你看到它在下拉菜单项目以及页脚文本。

http://scosha.mybigcommerce.com/w107b/ when you scroll over the navigation you see an animated css3 transformation. It works fine in firefox without flickering but with chrome and safari the effect is very obvious, you see it in the drop down menu items as well as the footer text.

推荐答案

这是已知问题在Chrome 22（显然是Safari）上使用Macintosh文字呈现。 GPU加速导致MacOS从子像素切换到灰度抗锯齿，这使得字体重量显着降低。

This is a known issue with Macintosh text rendering on Chrome 22 (and apparently Safari). GPU acceleration causes MacOS to switch from subpixel to greyscale antialiasing which makes the font weight appear to decrease noticeably.

更新：

正如以下OP说明，修正是应用 -webkit-font-smoothing：antialiased - 它始终应用灰度抗锯齿。如果你这样做，你可能想增加你的字体权重四周，因为灰度反锯齿文本看起来明显比亚像素更薄

As the OP notes below, the fix is to apply -webkit-font-smoothing: antialiased - which applies grayscale anti-aliasing at all times. If you do this, you'll probably want to increase your font-weights all around since greyscale anti-aliased text looks notably thinner than sub-pixel

你可以得到通过应用导致内容始终是GPU加速的属性（例如背面可见性：隐藏），但是因为这些不能保证在未来的浏览器版本中引起GPU加速，所以相同的效果 - 它更加未来被证明简单地指定灰度。

You can get the same effect by applying properties that cause the content to always be GPU accelerated (such as back-face-visibility: hidden) but because these are not guaranteed to cause GPU acceleration in future browser versions - it is more future proofed to simply specify greyscale.

这篇关于CSS3使用chrome / safari来影响其他元素的变换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！