Not sure if this is the right place to make CSS suggestions, but here I go.
First, I fully acknowledge that my 2013 Macbook Pro is old, and that I shouldn't expect every website to hone their performance for my aging hardware.
That being said, I have noticed that the mix-blend-mode: screen
styles on .re_footer--secondaryBg and .re_footer--tertiaryBg (dark theme) have a significant impact on the way that Chrome repaints pages while scrolling, which is especially noticeable on long pages with lots of images and media. When the rendering is trying to catch up with my scrolling, there are large white artifacts in the chunks of the page that are trying to re-render, which look very stark against the rest of the dark theme. If I disable the mix-blend-mode styles in the inspector, there are still times that the rendering has to catch up, but it is much faster, and the glaring white artifacts are gone.
Fortunately, I think the best of both worlds is possible. I dragged both .re_footer-- elements into the actual footer element that they're meant to overlay, and then set isolation: isolate
on that footer element. That way, Chrome only tries to apply the blend within that footer element, instead of forcing a repaint on the whole page. I did also have to set a position: absolute !important
on the individual .re_footer-- elements, but that was just a quick and dirty workaround.