CSS3转换导致文本闪烁在Safari和Firefox Mac优胜美地

前端之家收集整理的这篇文章主要介绍了CSS3转换导致文本闪烁在Safari和Firefox Mac优胜美地前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在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));
}

我尝试了以下几点:

将这些样式的所有可能组合添加到身体,转化元素和/或其父代

-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);
-moz-transform: translate3d(0,0);
-webkit-transform: translate3d(0,0);
 transform: translate3d(0,0);
-webkit-font-smoothing: subpixel-antialiased;
-webkit-text-stroke: 0.35px;

如果(样式如下)适用于身体,则问题在Safari中是固定的,但不在Firefox中,因为它不是webkit浏览器.

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

我真的不知道是什么原因造成的,我该如何解决它!

解决方法

好的!

经过一周的测试,删除添加CSS规则后,我终于找到了解决问题的解决方案.我最初在Firefox 39和Safari 9中都有这个问题,但Firefox神秘地修复了最新的更新.然而,Safari没有.该问题与页面上元素的3D渲染有关.我试图缩放的元素必须被转换为3D上下文,页面上的闪烁元素在2D和3D之间切换,如其他答案中的“Woodrow-Barlow”所述.

通过增加

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

到闪烁的元素,从而在页面加载时将它们呈现在3D中,它们不再需要切换!

编辑1:对于在其他浏览器中出现此问题的用户,请查看CSS’will-change’属性
https://dev.opera.com/articles/css-will-change-property/

原文链接:https://www.f2er.com/css/216491.html

猜你在找的CSS相关文章