应用 CSS 动画时 Chrome 中的文本模糊答案

【问题标题】：Blurred text in Chrome when CSS animations are applied应用 CSS 动画时 Chrome 中的文本模糊
【发布时间】：2015-02-13 10:53:06
【问题描述】：

我的网站上的动画文本有问题。我正在使用以下 CSS 来制作动画：

@-webkit-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -moz-transform: translateX(2000px);
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}

@-o-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -o-transform: translateX(2000px);
    }

    100% {
        opacity: 1;
        -o-transform: translateX(0);
    }
}

@keyframes fadeInRightBig {
    0% {
        opacity: 0;
        transform: translateX(2000px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInRightBig {
    -webkit-animation-name: fadeInRightBig;
    -moz-animation-name: fadeInRightBig;
    -o-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig;
}

当 .fadeInRightBig 应用于文本元素时，它在 Chrome 中变得模糊，如下图所示。第一个元素没有应用动画。可能是因为调整了图像的大小，所以有点难以看清。

据我所知，这个问题只存在于 Chrome 中。在 Firefox 和 IE 中，动画文本很清晰。

我试图在 Fiddle (http://jsfiddle.net/DTcHh/2608/) 中重现问题。然而，在这个 Fiddle 中，这似乎不是问题。

我的网站位于：http://steffanlildholdt.dk/。

有人知道问题可能是什么吗？

【问题讨论】：

在最新的 Chrome 39 中对我来说看起来不错。另外：使用 body { overflow-y: scroll } 以防止在展开这些框时出现滚动条引起的跳动。
我也在使用 Chrome 39，我发现 Chrome 和 Firefox 之间有明显的区别。该网站通常较长，因此滚动条将始终存在。我刚刚删除了不受此问题影响的区域；）
我不知道在 Mac 上是否有区别 - Here is your site in Chrome and Firefox side by side
是的，看起来没问题。然后我猜 Mac 必须以不同的方式呈现网站，而问题只在 PC (Windows) 上

标签： javascript jquery css google-chrome css-transitions

【解决方案1】：

在出现模糊的元素上，应用以下样式：

-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;

【讨论】：

我尝试添加这些行，但似乎此修复只会使非动画文本与动画文本一样模糊。 :( (bit.ly/1DvOHFT.)