Browser slowdown and rendering issues when scrolling past banner image
The banner image at the top of each page and blog is poorly rendered on my machine, which makes it look bad, and also means that my computer becomes very laggy when I scroll the page while that image is at the top.
I've noticed this a couple of times, but I think it's fairly new, possibly something that started happening in the last month or two. This may be an issue with my hardware/os/browser/etc, but I wonder if there's an easier way of causing the effect that we want that works for more people.
When stationary, the header looks like this:
I think it's something to do with the blend mode CSS property, when I remove that line or switch it to another blend mode, the problem disappears. I wonder if a similar blue-hue effect can be achieved with hue-changing CSS filters, which may have fewer performance implications.
My browser/OS details:
Firefox 82.0.3 (64-bit)
lsb_release -a:
Distributor ID: Pop
Description: Pop!_OS 20.10
Release: 20.10
Codename: groovy
uname -a:
Linux pop-os 5.8.0-7625-generic #26~1604441477~20.10~d41e407-Ubuntu SMP Wed Nov 4 01:25:00 UTC 2 x86_64 x86_64 x86_64 GNU/Linux