search

lowtechmag / solar

Pelican theme for solar powered version of lowtechmagazine.com
https://solar.lowtechmagazine.com
465 stars 25 forks source link

mix-blend-mode on images affects performance #6

Open cadars opened 3 years ago

cadars commented 3 years ago

I noticed that the fan of my laptop (2014 MacBook Pro, Chromium) kicks in when scrolling image-heavy pages, the homepage in particular.

When removing the mix-blend-mode CSS rule, scrolling becomes smooth again, and the GPU is less solicited. https://stackoverflow.com/questions/33795350/mix-blend-mode-scroll-lag-issues

Unsure about this, but maybe using isolation: isolate; on the containing element might help? https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode#HTML_example

I believe that fixing this issue would minimize the energy consumption for the user/client.

rscmbbng commented 3 years ago

I've managed to confirm the effect indeed with a simple test: Scrolling through an article while recording the performance with firefox's inspector.

Default: 13% of computation is for graphics calls and 82% of the time the browser is idle. Isolate: 10% of computation is for graphics calls and 84% the browser is idle. No blend mode: 2% of computation is for graphics rendering calls and 93% of the time the browser is idle.

I do not like the look of isolate and the gains are minimal. Instead, disabling CSS blend modes and precomputing all color swatches seems the more logical approach. However, I'll have to discuss it with the team and find the time..

Thanks!