Performance 混合模式滚动滞后问题

只需在文本元素上使用“混合模式：叠加”，当文本在屏幕视图中时，它会导致我的浏览器滚动非常慢。一旦滚动过文本项，滚动将返回到“黄油平滑”

如果我移除混合模式，影响chrome和firefox的滞后效应就会得到解决

---

还有其他人在混合模式方面有类似的问题吗？

不确定这对您的情况是否有帮助，但我有一个“transform:scale（-1）；”在启用“混合模式”的元素上设置。当我删除转换的表现是丝般光滑！因此，如果您使用任何类型的“转换”，我都会删除它，并尽可能寻找替代解决方案

---

如果您将“隔离”属性设置到下面的层，也可能会有所帮助，如这里的示例所示：

不要做太多的web工作，但在前台文本元素后面的背景中是否有一些昂贵的处理，例如大量图像或以昂贵的程序方式绘制的东西（例如：通过客户端脚本）？一般来说，在这里绘制实际文本应该非常便宜，但混合模式可能需要重复处理文本合成的背景中的任何内容。因此，如果某个地方存在瓶颈，它可能与文本背后的内容有关，一种可能的加速方法是优化。。。。。。例如，将文本后面的内容拆分为较小的部分（例如：图像切片，在其上绘制重叠的文本，而不是一幅巨大的图像）。谢谢。。我已经删除了背景，只是添加了纯色，但似乎没有帮助。。嗯，我会继续尝试一些东西，但欢迎任何建议：）我可以证实这一点。在我的例子中是

混合混合模式：在绝对位置
：在
伪元素之后（在图像上）多个
。在FireFox中滚动时性能会大幅下降（在Chrome上可以）。在Chrome 61中也会遇到同样的问题。我在页面上有一个混合模式的图像，我所有动画的帧速率都降到了5fps+1，以表示隔离，修复了一个非常类似的问题，我无法从元素中移除变换！