Strange SVG artefacts

[pySilver]

What component (if applicable)

• URL for category: https://tailwindui.com/components/marketing/page-examples/landing-pages?include=archived#component-c9ffe5deded27ba87841128323150da9
• Component name: Most of components that uses blured svg backgrounds

Describe the bug SVG Background causes strange artifacts that magically disappears when text selection is applied in problematic area

To Reproduce Probably most affected browser is FF

Expected behavior No artefacts

Screenshots Screenshot here

Browser/Device (if applicable)

• OS: macOS
• Browser Firefox Developer Edition
• Version 111.0b8 (64-bit)

Additional context Add any other context about the problem here.

[pySilver]

Yet another screenshot here. This is happening on FF browser (at least on MacOS) only: https://share.cleanshot.com/F5jMclx6

[pySilver]

Issue appears on scroll and goes away on click: https://share.cleanshot.com/PzX0nSts

[RobinMalfait]

Hey, thank you for this bug report! 🙏

Hmm this is very odd, it seems like a browser rendering issue, maybe a faulty GPU? Does this still happen if you restart your browser and if it does, does it still happen after you restart your OS itself?

Do you have hardware acceleration disabled by any chance? If so, then I think everything is rendered using the CPU instead of the GPU. You can double check this in:

Firefox > Preferences > General > Performance

You probably want to check these if they aren't already. When I disable these then I can also see the artefacts. Make sure that after you toggle this, that you restart your browser or open a new tab with https://tailwindui.com/components/marketing/page-examples/landing-pages?include=archived#component-c9ffe5deded27ba87841128323150da9

Does this help for you?

[reinink]

@pySilver Hey just an update here. As a team we've been able to reproduce this issue now, and are working on a fix. It's a bit of a complex problem — Firefox really doesn't like applying a blur filter to SVGs.

However we may have discovered an alternative approach using a <div> with a clipping path instead of an SVG. You can find a concept of this approach here: https://play.tailwindcss.com/Lm8Ky5sk5w

We're going to do some more testing around this, and if this approach seems solid we're going to update all our blurs in Tailwind UI to use this technique instead.

We'll post an update once we've made some progress on this 👍

[pySilver]

Oh! Great! Thanks for quick response and successful verification.

[pySilver]

@reinink Moreover blur is also known to cause frame drops at Chrome. I've seen this approach used to overcome the problem:

pointer-events: none;
width: 1800px;
height: 1800px;
position: absolute;
top: 20%;
left: 30%;
transform: translate(-50%, -50%);
background-image: radial-gradient(ellipse at center, hsl(290deg 92% 54% / 30%), transparent 60%);
z-index: -1;

Similar ticket: https://github.com/thirdweb-dev/dashboard/issues/703

It would be nice to see it solved in Tailwind UI examples. Thank you for your work!

-- Happy paid customer :)

[reinink]

@pySilver Hey! Just following up on this to let you know that we've updated all these blurred SVG implementations in Tailwind UI to use a clip-path instead. From our testing this appears to resolve these strange rendering issues in Firefox.

Thanks so much for bringing this to our attention! 🤙

[pySilver]

Thank you for quick and solid resolution!