From 871d555e9586a7fe0d8052808ce344e271697808 Mon Sep 17 00:00:00 2001 From: jbranchaud Date: Fri, 21 Feb 2025 15:29:14 -0600 Subject: [PATCH] Add Filter Blur Requires Expensive Calculation as a CSS TIL --- README.md | 3 +- ...ter-blur-requires-expensive-calculation.md | 29 +++++++++++++++++++ 2 files changed, 31 insertions(+), 1 deletion(-) create mode 100644 css/filter-blur-requires-expensive-calculation.md diff --git a/README.md b/README.md index e15838f..54b2fa7 100644 --- a/README.md +++ b/README.md @@ -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) diff --git a/css/filter-blur-requires-expensive-calculation.md b/css/filter-blur-requires-expensive-calculation.md new file mode 100644 index 0000000..b775f42 --- /dev/null +++ b/css/filter-blur-requires-expensive-calculation.md @@ -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)