til/css/filter-blur-requires-expensive-calculation.md

Filter Blur Requires Expensive Calculation

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.

source