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

我想对元素应用一些CSS3转换，并有两个问题。该网页包含许多粘滞便笺，我想放大点击（缩放）或翻转悬停（rotateY）他们通过应用CSS类与一些JavaScript。CSS3转换导致屏幕闪烁或别名字体

例如变焦类是这样的：

.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)。

每个贴图的默认旋转角度为6deg，我假冒随机旋转nth-child CSS3选择器应用不同的旋转。

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

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

JSfiddle（在Mac OS X 10.6.8与谷歌浏览器12.0.742.122测试）

我已经尝试过了-webkit-backface-visibility伎俩，闪烁已经消失了，并肯定会进行转换，但字体看起来很难看所有时间。

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

来源

2011-07-27 wnkz

你可以把例子放入一个jsfiddle中，截图没有很好地说明问题。

但是我遇到过类似的问题，我也找不到问题的原因。或者拿出一个关于可能发生什么的解释。

但是我找到了解决方案，在我的情况下工作。

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

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

类似的东西。

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

我想提供一个关于什么保存-3d的解释，但是我发现文档很模糊。

关于我收集的症结是，它可以解决这个问题（它所做的那样），它有两个属性

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

平默认情况下使用。

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

如果有人在webKit上工作，你能否提供和解释这是什么。

来源

2011-07-27 11:34:50 AshHeskes

我很想把例子放入jsfiddle，但这是一个非常复杂的页面和一个我不能那样分享的私人项目。我试过你的解决方案，但似乎没有工作......：/我会看看我是否可以伪装成jsfiddle;）谢谢。 – wnkz

这里是你jsfiddle：http://jsfiddle.net/DaPsn/10/ – wnkz

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

尝试以下添加到您的CSS：

-webkit-transform: translateZ(0);

这将迫使铬硬件加速，因为铬通常不使用它基于CSS的

来源

2011-07-27 11:19:26 Semyazas

我很抱歉，但是这似乎已经为'背面，visibility'同样的效果。字体只是一直看着别名。 – wnkz

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

来源

2011-07-27 11:22:06 bjornd

我有同样的问题。找到解决方案的时间很长，但最终我找到了它。

只需将类.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); 
}

来源

2014-08-26 22:47:10

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

回答

相关问题