CSS3 转换导致文本在 Safari 和 Firefox Mac Yosemite 中闪烁

Question

我在 Safari 和 Firefox (Mac/Yosemite) 上遇到了这个奇怪的问题，当鼠标悬停在转换元素上时，页面上几乎所有的文本都会闪烁。

示例 gif:(Firefox、优胜美地)

.usp {
   //USP has an icon that is defined below
    opacity: .4;
    @include transition(all .3s ease-in-out);


    &:hover { 
        opacity: 1;
        @include transition(all .3s ease-in-out);


        .icon {
            @include transform(scale(1.1));
            @include transition(all 1.7s ease-in-out);
        }
    } // :hover
} 

.usp .icon {
    display: block;
    height: 75px;
    width: 75px;
    // Insert background-image sprite (removed from this example)
    @include transition(all .3s ease-in-out); 
    @include transform(scale(1.0));
}

我试过以下方法:

将这些样式的所有可能组合添加到正文、转换元素和/或其父元素

-webkit-transform-style:preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
 backface-visibility: hidden;
-webkit-filter: opacity(.9999);
-webkit-font-smoothing: antialiased;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke: 0.35px;

如果(下面的样式)应用于正文，则问题在 Safari 中已解决，但在 Firefox 中未解决，因为它不是 webkit 浏览器。

-webkit-transform: translate3d(0, 0, 0);
-webkit-text-stroke: 0.35px;

我完全不知道是什么原因造成的，也不知道该如何解决!

Answer 1

好的!

经过一周的测试、删除和添加 CSS 规则，我终于找到了解决问题的方法。我最初在 Firefox 39 和 Safari 9 中都有这个问题，但 Firefox 神秘地用最新的更新修复了自己。然而，Safari 却没有。问题与页面上元素的 3D 渲染有关。我尝试缩放的元素必须转换为 3D 上下文，页面上闪烁的元素在 2D 和 3D 之间切换，正如@Woodrow-Barlow 在其他答案中所解释的那样。

通过添加

-webkit-transform: translate3d(0, 0, 0);

对于闪烁的元素，因此在页面加载时以 3D 形式呈现它们，它们不再需要切换!

编辑 1:对于在其他浏览器中遇到此问题的人，请查看 CSS“will-change”属性: https://dev.opera.com/articles/css-will-change-property/