html - CSS 转换的模糊和闪烁问题

Question

我在这里也发现了很多问题和解决方案，但似乎没有一个对我有用。放大后，文字变得模糊，然后闪烁到位。渲染有问题。

我对我尝试使用的确切结构做了一个 fiddle ，如果有人有解决方案，我将不胜感激。

我想强调的是，我已经尝试过我在这里找到的解决方案，但没有任何帮助，或者我无法按预期实现它们。

fiddle : https://jsfiddle.net/1yu9p66L/1/

.box1:hover {
    -moz-backface-visibility: hidden;
    -moz-transform: translateZ(0) scale(1.0, 1.0);
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.09);
    -moz-perspective: 1000;
    -moz-backface-visibility: hidden;
}

PS:目前正在 FF 45.0.1 上进行测试。

Answer 1

将变换添加到原始框，将其缩放到 < 1，然后将悬停状态下的变换更改为 1。您需要调整框的大小。

以 .box1 为例:

-webkit-transform: scale(.9);
-ms-transform: scale(.9);
-moz-transform: scale(.9);
transform: scale(.9);

和这个到 .box1:hover

-webkit-transform: scale(1);
-ms-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);

https://jsfiddle.net/1yu9p66L/2/