小编Ric*_*urg的帖子

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

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

示例gif :( Firefox,Yosemite)

在此输入图像描述

.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));
}
Run Code Online (Sandbox Code Playgroud)

我尝试过以下的事情:

将这些样式的每种可能组合添加到正文,转换元素和/或其父级

-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; …
Run Code Online (Sandbox Code Playgroud)

css transform css3 css-transitions css-transforms

14
推荐指数
2
解决办法
1万
查看次数

标签 统计

css ×1

css-transforms ×1

css-transitions ×1

css3 ×1

transform ×1