Question

我正在尝试对元素应用一些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);
}

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

每个stickies都有6deg的默认旋转，我使用nth-child CSS3选择器伪随机旋转以应用不同的旋转。

问题是，当缩放或翻转时，屏幕会随机闪烁和页面上的某些字体会被改变，看起来很丑陋而不是全部，这真的很奇怪。

这是一个jsfiddle，所以你可以自己看问题：

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

我已经尝试了-webkit-backface-visibility技巧，闪烁已经消失并且确定但字体一直变得难看。

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

Answer 1

你能把例子放到一个jsfiddle中，截图并没有很好地说明问题。

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

但是我找到了一个适用于我的解决方案。

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

我将它应用于所有似乎有渲染问题的元素。在我的情况下，一些元素没有被转换，甚至在同一个容器中，以一种看似随机和不一致的方式实现。

等等。

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

我很乐意提供有关保存-3d的解释，但是我发现文档很模糊。

关于我收集的关键是它可以解决问题（它做了）并且它有两个属性

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

默认使用Flat。

抱歉，我无法给出更详细的答案，但我希望这能解决您的问题。

如果有人在WebKit上工作，你可以提供和解释这是真的吗。

Answer 2

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

-webkit-transform: translateZ(0);

这将强制执行chrome的硬件加速，因为chrome经常决定不使用基于CSS的

Answer 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);
}

Answer 4

我看到你的文字只是抗锯齿。尝试添加3d变换，例如rotateZ(0)来修复它。

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

4 个答案: