8

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?

Community
  • 1
  • 1
Danny
  • 81
  • 1
  • 2
  • 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... –  Nov 19 '15 at 04:42
  • ... 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). –  Nov 19 '15 at 04:43
  • 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 :) – Danny Nov 20 '15 at 03:03
  • 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). – Artur Czyżewski Jun 16 '16 at 13:07
  • 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 – grmdgs Sep 26 '17 at 14:52

1 Answers1

5

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

SkyNet
  • 104
  • 1
  • 6
  • 2
    +1 for suggesting isolation, fixed a very similar issue I was having where I couldn't remove the transform from the element! – Jack Notman Nov 05 '19 at 16:46