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/

Answer 2

OP 的注意事项：您似乎至少了解这些概念中的大部分，但我在此答案中为可能遇到类似问题的其他人提供了很多细节。 p>

在具有专用 GPU（用于渲染图形的处理器）的计算机上运行的现代浏览器中，浏览器有时会将渲染网页的任务从您的 CPU（“普通”处理器）转移到 GPU。 CPU 和 GPU 各有优缺点 - GPU 的本质是它可以非常高效地渲染 3 维转换，但可能无法像 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），所以我'我无法测试这段代码。但是，我经常使用类似的技术来解决类似的问题。

Answer 3

啊，但是你试过了吗

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

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

老实说，我不知道为什么会这样，但我可以看到它停止了 Safari 中 Fiddle 的闪烁。

Answer 4

好的！

所以，我面临的问题是在一个自定义弹出窗口中，我使用 css 过渡对十字按钮产生了滚轮效果。但这会导致弹出窗口出现闪烁问题。

在访问了各种在线门户之后，我知道了过渡属性：

webkit-backface-visibility: hidden;

在过渡元素上确实有效并停止闪烁。但是在我的情况下，使用这个属性会模糊整个组件（弹出窗口），为了阻止这种情况，我不得不在组件的根元素上使用另一个属性：

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

但由于我在自定义弹出窗口中使用它，该弹出窗口已经在 y 方向上平移了 -50% 以使其保持在中心，因此我被限制不使用它。

在玩了几天css属性并尝试了各种解决方案之后，我得出一个结论，即使用过渡元素的组件的总高度必须是EVEN，如果是动态数据，我们需要调整边距和内边距，使总高度保持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。