Closed pySilver closed 1 year ago
Yet another screenshot here. This is happening on FF browser (at least on MacOS) only: https://share.cleanshot.com/F5jMclx6
Issue appears on scroll and goes away on click: https://share.cleanshot.com/PzX0nSts
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?
@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 👍
Oh! Great! Thanks for quick response and successful verification.
@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 :)
@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! 🤙
Thank you for quick and solid resolution!
What component (if applicable)
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)
Additional context Add any other context about the problem here.