CSS3 转换导致屏幕闪烁或字体别名

Posted 2023-03-15

【中文标题】CSS3 转换导致屏幕闪烁或字体别名

【英文标题】：CSS3 transforms cause screen flickering or aliased font

【发布时间】：2011-10-14 04:13:00

【问题描述】：

我正在尝试对元素应用一些 CSS3 转换，但存在两个问题。 该网页包含许多便笺，我想通过应用带有一些 javascript 的 CSS 类来放大点击（缩放）或在悬停时翻转（rotateY）它们。

例如缩放类是这样的：

.postit-container.enabled 
  z-index: 15;
  -webkit-transition: -webkit-transform 0.15s ease-in-out;
  -moz-transition: -moz-transform 0.15s ease-in-out;
  -o-transition: -o-transform 0.15s ease-in-out;
  -ms-transition: -ms-transform 0.15s ease-in-out;
  transition: transform 0.15s ease-in-out;
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  -ms-transform: scale(1.25);
  transform: scale(1.25);

对于翻转效果，我只在:hover 上使用rotateY(180deg)。

每个便签都应用了 6 度的默认旋转，我使用 nth-child CSS3 选择器伪造随机旋转以应用不同的旋转。

问题是缩放或翻转时屏幕随机闪烁并且页面上的一些字体被改变并且看起来很难看但不是全部，这真的很奇怪。

这是一个 jsfiddle，因此您可以自己查看问题：

JSfiddle（在 Mac OS X 10.6.8 上使用 Google Chrome 12.0.742.122 测试）

我已经尝试过-webkit-backface-visibility 的技巧，闪烁肯定会消失并且会变形但是字体看起来很丑总是。

我希望有人有一个魔术，因为我真的不明白这种行为。

【参考方案1】：

您能否将示例放入 jsfiddle 中，屏幕截图无法很好地说明问题。

但是我遇到了类似的问题，我也找不到问题的原因。或者对可能发生的事情做出解释。

但我确实找到了适合我的解决方案。

-webkit-transform-style: preserve-3d;

我将它应用于似乎存在渲染问题的所有元素。在我的例子中，一些元素没有被转换，甚至在同一个容器中，以看似随机和不一致的方式受到影响。

类似的东西。

.header *, .sticky * 
    -webkit-transform-style: preserve-3d;

我很想解释一下 preserve-3d 的作用，但是我发现文档很模糊。

我收集到的关键在于它可以解决问题（确实如此）并且它有两个属性

-webkit-transform-style: preserve-3d;
//and
-webkit-transform-style: flat;

默认使用平面。

对不起，我无法给出更详细的答案，但我希望这可以为您解决问题。

如果周围有人在使用 webKit，您能否提供并解释这到底是做什么的。

【讨论】：

我很乐意将示例放入 jsfiddle，但这是一个非常复杂的页面和一个我无法像那样共享的私人项目。我已经尝试过您的解决方案，但似乎不起作用...：/我会看看是否可以将其伪造为 jsfiddle ;）谢谢。

我看了看，并使用我在答案中提到的方法修复了它。但是我将-webkit-transform-style: preserve-3d 添加到.postit-container。唯一的问题是字体一直有点模糊，但它们至少是一致的。如果您仍然遇到其他元素的问题。试试毯子* -webkit-transform-style: preserve-3d; 。在这里修改jsfiddle.net/AshMokhberi/sczCa。老实说，我认为你不会比这更好。请不要忘记勾选我的答案。

字体模糊对我来说是个大问题，但还是谢谢你。 :)

我认为这是浏览器在应用 CSS3 转换时引起的整体渲染问题。我认为您无法找到解决模糊文本的方法。它要么一直模糊，要么在动画期间模糊。您是否尝试过使用非自定义字体，是否得到相同的行为？

【参考方案2】：

尝试将以下内容添加到您的 CSS：

-webkit-transform: translateZ(0);

这将强制 chrome 进行硬件加速，因为 chrome 通常会根据 CSS 决定不使用它

【讨论】：

很抱歉，但这似乎与backface-visibility 具有相同的效果。字体总是看起来有别名。

【参考方案3】：

我也有同样的问题。 找了好久，终于找到了。

只需将.no-flickr 类添加到您网站上的任何问题对象，您就会看到没有任何错误的正确动画。

看到这个http://jsfiddle.net/DaPsn/92/

.no-flickr         
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);

【参考方案4】：

我看到你的文字只是抗锯齿。尝试添加 3d 变换，例如 rotateZ(0) 来解决这个问题。