混合模式滚动延迟问题

Question

混合模式滚动延迟问题

performancescrollgpulagmix-blend-mode

8

在文本元素上仅使用“mix-blend-mode:overlay”就会导致我的浏览器在文本出现在屏幕视图时滚动非常缓慢。一旦您滚过文本项，滚动就会恢复到非常流畅。

如果我删除mix-blend-mode，这种影响Chrome和Firefox的滞后效应就得到解决。

是否有其他人遇到了类似的mix-blend-mode问题？

- Danny

你可能不经常从事网页工作，但是你是否有一些昂贵的后台处理任务需要在前景文本元素之后进行，比如一个巨大的图像或者以昂贵的程序方式绘制的内容（例如通过客户端脚本）？通常来说，实际文本的绘制应该是相当便宜的，但是可能混合模式要求反复处理文本叠加在其上的背景。因此，如果存在瓶颈，很可能与文本背后的内容有关，而加速的一种可能方法是优化这个部分... - user4842163

例如，将文本后面的内容分割成较小的部分（例如：图像切片，在其上绘制重叠文本而不是一个巨大的图像）。 - user4842163

谢谢。我已经移除了背景，只添加了一个纯色，但好像没有帮助……嗯，我会继续尝试一些东西，但欢迎任何建议 :) - Danny

我能够确认这一点。在我的情况下，是对于绝对定位的 :after 伪元素（在图像上）使用了 mix-blend-mode: multiply。在 Firefox 中滚动时出现了巨大的性能下降（而在 Chrome 中则没有问题）。 - Artur Czyżewski

在Chrome 61中遇到了同样的问题。我在页面上有一张使用mix-blend-mode的图片，导致所有动画的帧率降至5fps。 - grmdgs

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SkyNet · Accepted Answer

我不确定这是否对您有帮助，但是我在启用了'mix-blend-mode'的元素上设置了'transform: scale(-1);'。当我删除变换时，性能变得非常顺畅！因此，如果您正在使用任何类型的“ transform”，请删除它，并尽可能寻找替代解决方案。

如果您在下面的层中设置'isolation'属性，也可能会有所帮助，例如这里的示例： https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#HTML_example