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

Question

我在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, 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"将改变"属性:https: //dev.opera.com/articles/css-will-change-property/

Answer 2

OP注意:你似乎至少知道这些概念中的大多数,但我已经在这个答案中包含了很多细节,供其他可能遇到类似问题的人使用.

在具有专用GPU(用于渲染图形的处理器)的计算机上运行的现代浏览器中,浏览器有时会将将网页从CPU("普通"处理器)渲染到GPU的任务转移.CPU和GPU每个都有自己的优点和缺点 - GPU的本质是它可以非常有效地呈现三维转换,但可能无法像CPU一样清晰地呈现纯文本.

您的悬停效果是使用浏览器认为适合硬件加速GPU渲染的转换(最有可能是由scale(1.1)转换触发),因此在悬停动画/转换发生时,它已将渲染暂时转移到GPU.动画完成后,CPU再次接管渲染.由于不同硬件使用的渲染策略不同,因此GPU负责时文本看起来不同(不太清晰).

不幸的是,我们还没有(通过CSS)明确控制硬件加速 - 浏览器会随时设置它.然而,我们可以做的是设置一些我们怀疑会将浏览器置于硬件加速GPU模式的属性.这里的理论是,即使没有动画,我们也会将浏览器保持在GPU模式,这样我们就不会看到"闪烁".

这种策略有一些缺点:访问您网站的用户在您的页面打开时会略微增加RAM内存使用量,而移动/笔记本电脑用户的电池消耗会略有增加.在没有专用GPU的设备上,不会触发硬件加速(但是再一次,这些设备不会看到你正在看到的"闪烁").

看起来你已经尝试通过将scale(1.0)属性添加到非悬停元素来实现这一点- 我最好的猜测是你的浏览器"聪明"并且检测到这条规则什么都不做而忽略它.触发硬件加速的最可靠方式通常是Z轴上的变换.尝试将转换更改为以下内容:

@include transform(scale(1.00001), translateZ(0.00001));

我没有使用值"1"和"0",而是使用无穷小的近似值; 希望这会阻止浏览器变得"聪明"并忽略规则.

我假设您的Sass包括做供应商前缀.仔细检查最终输出不仅包括-webkit-transform:和-moz-transform:,还包含未加前缀的transform:语法.如果您想确定(出于调试目的),只需手动输入:

.usp .icon {
  transform: scale(1.00001), translateZ(0.00001);
  -webkit-transform: scale(1.00001), translateZ(0.00001);
  -moz-transform: scale(1.00001), translateZ(0.00001);
}

在我的结尾,我没有经历任何闪烁开始你的小提琴(我怀疑我的浏览器/操作系统/硬件配置不认为二维规模适合GPU),所以我无法测试此代码.但是,我使用类似的技术来经常解决类似的问题.