On that flickering blur in Chrome

backdrop-filter: blur is a popular design for navbars. But it’s unusable in its current state, due to its flickery appearance in Chrome. Here’s an example:

A heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nav with a blurred background

In Chrome, notice how even a 1px scroll can cause the color to completely change. Here’s a recording:

Here’s the general problem: a blur operation, at the edges of the image, needs to know what the content is outside the image. The correct approach would be to give the blur filter enough of the background content to work with. But in Chrome, the blur is only given the pixels immediately behind the element. So, as a hack, the blur must guess what the content is outside the nav. Wikipedia calls this “edge handling”.

Chrome seems to take the extend strategy: it guesses that the pixels at the edge of the background image extend infinitely in all directions. This is why the blur flickers so much: a tiny scroll causes the edge pixels to change, which causes the extended pixels to completely change.

One better edge-handing strategy is mirroring. Mirroring is better because, even though it’s inaccurate, it results in smoother transitions.

Neither Firefox nor Safari have this problem, although I’m not sure which approach they take to edge handling.

Tagged #backdrop-filter, #chrome, #css, #design.

Similar posts

More by Jim

👋 I'm Jim, a full-stack product engineer. Want to build an amazing product and a profitable business? Read more about me or Get in touch!

This page copyright James Fisher 2024. Content is not associated with my employer. Found an error? Edit this page.