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);

到闪烁的元素，然后在页面加载时渲染它们，它们不再需要切换！

编辑1 ：对于在其他浏览器中遇到此问题的用户，请查看CSS＆＃39;将会更改＆＃39;属性： https://dev.opera.com/articles/css-will-change-property/

Answer 2

OP注意：您似乎至少知道这些概念中的大部分内容，但我已经在此答案中为其他可能遇到类似问题的人提供了大量详细信息。

在具有专用GPU（用于渲染图形的处理器）的计算机上运行的现代浏览器中，浏览器有时会将从网页（＃34;普通＆＃34;处理器）渲染网页的任务转移到GPU。 CPU和GPU各有各的优缺点 - GPU的本质是它可以非常有效地渲染三维转换，但可能无法像CPU一样清晰地呈现纯文本。

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

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

此策略有一些缺点：访问您网站的用户在您的网页打开时会略微增加RAM内存使用量，而移动/笔记本电脑用户的电池消耗会略有增加。在没有专用GPU的设备上，硬件加速不会被触发（但是再一次，那些设备将无法看到＆＃34;闪烁＆＃34;你＆＃39;无论如何都要看。）

看起来你已经尝试通过将scale(1.0)属性添加到非悬停元素来尝试这样做 - 我最好的猜测是你的浏览器得到了＃34;聪明＆＃ 34;并检测到此规则不执行任何操作并忽略它。触发硬件加速的最可靠方式通常是Z轴上的变换。尝试将转换更改为以下内容：

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

而不是使用值＆＃34; 1＆＃34;和＆＃34; 0＆＃34;，我使用无限小的值;希望这会阻止浏览器获得＆＃34;聪明的＆＃34;而忽略了规则。

我假设您的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 ），所以我无法测试此代码。但是，我已经使用类似的技术来解决类似的问题。

Answer 3

啊，但你试过吗

.usp .icon {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

http://jsfiddle.net/j04mayvb/4/

老实说，我不知道为什么会这样，但是我可以看到它在Safari中阻止你的小提琴闪烁。

Answer 4

OK！

所以，我遇到的问题是在自定义弹出窗口中，我使用css过渡在十字按钮上有一个滚轮效果。但这导致了弹出窗口中的闪烁问题。

在访问各种在线门户网站后，我了解了过渡属性：

webkit-backface-visibility: hidden;

过渡元素上的

确实可以正常工作并停止闪烁。但是在我的情况下使用这个属性模糊了整个组件（弹出窗口）并且为了阻止它，我不得不在组件的根元素上使用另一个属性：

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

但是当我在自定义弹出窗口中使用它时，它已经在y方向上翻译了-50％以保持在中心位置，我被限制不使用它。

在使用css属性几天并尝试各种解决方案之后，我得出结论，使用过渡元素的组件的总高度必须 EVEN ，并且在动态数据的情况下，我们需要调整边距和填充，使总高度保持 EVEN 。

这解决了我的问题。只需确保总高度保持偶数并相应地调整边距和填充。

希望它也可以帮助任何有需要的人。 ：）

Answer 5

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

这些代码是为支持多个浏览器而编写的。 试试这个mozila

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

Answer 6

我发现这主要发生在已经转换的元素上（即：滑入的模态）。是否有任何父元素的变换？

对于基于webkit的浏览器，网络上有大量修复，但对Firefox没有任何修复。