abdullah/til
1
0
Fork 0
mirror of https://github.com/jbranchaud/til synced 2026-01-02 22:58:01 +00:00
Code Issues Projects Releases Wiki Activity

Add Filter Blur Requires Expensive Calculation as a CSS TIL

Browse Source
This commit is contained in:
jbranchaud
2025-02-21 15:29:14 -06:00
parent cea3bc05b5
commit 871d555e95
2 changed files with 31 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@@ -10,7 +10,7 @@ pairing with smart people at Hashrocket.
For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186).
_1596 TILs and counting..._
_1597 TILs and counting..._
See some of the other learning resources I work on:
- [Ruby Operator Lookup](https://www.visualmode.dev/ruby-operators)
@@ -178,6 +178,7 @@ See some of the other learning resources I work on:
- [Define HSL Colors With Alpha Values](css/define-hsl-colors-with-alpha-values.md)
- [Display Responsive iframe Maintaining Aspect Ratio](css/display-responsive-iframe-maintaining-aspect-ratio.md)
- [Dry Up SCSS With Mixins](css/dry-up-scss-with-mixins.md)
- [Filter Blur Requires Expensive Calculation](css/filter-blur-requires-expensive-calculation.md)
- [Give Elements The Same Width With Flexbox](css/give-elements-the-same-width-with-flexbox.md)
- [Let Pointer Events Pass Through An Element](css/let-pointer-events-pass-through-an-element.md)
- [Lighten And Darken With CSS Brightness Filter](css/lighten-and-darken-with-css-brightness-filter.md)

29
css/filter-blur-requires-expensive-calculation.md Normal file
View File

@@ -0,0 +1,29 @@
# Filter Blur Requires Expensive Calculation
I had [a
page](https://www.visualmode.dev/connect-to-production-rails-console-aws-flightcontrol)
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`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur)
and [`backdrop-filter:
blur`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) both
use an expensive [Gaussian blur](https://en.wikipedia.org/wiki/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](https://github.com/tailwindlabs/tailwindcss/issues/15256)