ui
ui copied to clipboard
shadcn-ui
CSS Backdrop filter causing performance issues
Hello, some days ago I was facing a performance issue on modals, sheets, alerts...
Turns out that the performance issue was not Javascript (crazy right?!) it was a CSS rendering/painting problem, what causes is: backdrop-blur-sm. However apparently chorme (maybe all chromium based browsers ?) depends on GPU for 2d rendering. So if the user does not have good resources it can be a problem...
To reproduce it just go to some page that uses it like https://ui.shadcn.com/docs/components/sheet and try it out
ps: apparently firefox does not have this problem... maybe its cpu based rendering
Interesting. I'll look into the GPU usage for this. Thanks for the heads up.
I found that this performance problem scales with screen size so when you're looking into this you may not notice the performance issue on a laptop or 1920x1080, but it is definitely extremely noticeable for me on my 2560x1440.
+1 to not seeing the issue in firefox on my different screen sizes.
Had this issue just recently. My client's pc doesn't have dedicated GPU. I think it could be resolved by introducing some prop for toggling between backdrop-blur and just plain background opacity like white/90
Had this issue just recently. My client's pc doesn't have dedicated GPU. I think it could be resolved by introducing some prop for toggling between backdrop-blur and just plain background opacity like white/90
Any update on this issue? I am also facing this issue on Linux having AMD and Nvidia 2080 graphics card. Would be good to configure options or blur to opacity black/white as suggested above.
Any update on this issue? I am also facing this issue on Linux having AMD and Nvidia 2080 graphics card. Would be good to configure options or blur to opacity black/white as suggested above.
i am also looking for a solution where we can have a transparent black overlay instead of blurred overlay.
I just fixed it by replacing bg-background/80 backdrop-blur-sm by bg-slate-950/40 from local copy of sheet.tsx in my project at line no:30.
https://github.com/shadcn-ui/ui/blob/14abbd94b55b565597b52ac6aadd3527df1f82ea/apps/www/registry/default/ui/sheet.tsx#L30C52-L30C52
Probably same can be done for modal popup and other blur background components.
@amreesht Thanks. Yeah you are right. I checked. This modification can be made for other components as well. Very cool.
This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.