mix-blend-mode scroll lag issues

Question

Just using 'mix-blend-mode:overlay' on a text element and it causes my browser to scroll really slow while the text is in the screen view. As soon as you scroll past the text item, the scroll goes back to butter smooth.

The lag effect, which affects both chrome and firefox is solved if I remove the mix-blend-mode.

Has anyone else had a similar problem with mix-blend-mode?

Ferraro

Don't do much web work but do you have something expensive to process in the background behind the foreground text element, like a massive image or something that is drawn in an expensive procedural fashion (ex: through client-side script)? In general drawing the actual text should be quite cheap here but it's possible that the blending mode requires repeatedly processing whatever is in the background that the text is being composited over. So probably if there's a bottleneck somewhere, it has to do with what's behind the text, and one possible way to speed this up is to optimize that... – Addendum

... for example, splitting up whatever is behind the text into smaller sections (ex: image slices on which you draw overlaid text instead of one massive image). – Addendum

Thanks.. I've removed the bg and just added a solid color but didn't seem to help.. hmm I'll keep trying a few things but any suggestions are welcome :) – Ferraro

I can confirm this. In my case is mix-blend-mode: muliply on absolutely positioned :after pseudoelements (on images). Huge performance drop in FireFox while scrolling (on Chrome it is OK). – Sensory

Experience the same issue in Chrome 61. I had one image with mix-blend-mode on the page and my framerate for all animations dropped to 5fps – Savona

Answer 1

Not sure if this will help you in your case, but I had a 'transform: scale(-1);' set on element that had 'mix-blend-mode' enabled. When I removed the transform the performance was silky smooth! So, if you're using any sort of 'transform' I'd remove it and look for an alternative solution if possible.

It may also help if you set 'isolation' property to the layer beneath, as per example here: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#HTML_example

Richter

+1 for suggesting isolation, fixed a very similar issue I was having where I couldn't remove the transform from the element! – Sumner