I had a page on my blog that was experiencing some odd rendering behavior. The issue was manifesting a couple ways.
- Resizing and scrolling were janky and causing entire page layers to re-render causing the page to flash in and out.
- Sometimes entire layer chunks would fail to paint leaving a white block missing from the page.
The issue was occurring with and without JavaScript turned on for a statically-built page. I suspected that some aspect of the CSS was at fault.
I was going back and forth with Dillon Hafer about what the issue could be and he wondered, "could it be the backdrop-blur class from tailwind?". I tried removing that class and the responsiveness of the page immediately improved.
The filter: blur
and backdrop-filter: blur both
use an expensive Gaussian blur
calculation. One of these on a modern machine and browser probably won't have a
noticable impact. However, a bunch of them, as in the case of my page with a
recurring component, can have quite the performance hit.