1
CSS drop shadows broke my alien landscape in Chrome
Spent about 4 hours on a radial gradient nebula with layered box shadows for stars. Looked perfect in Firefox. Opened it in Chrome and every star had these weird blocky artifacts around them. Turns out Chrome handles shadow blur differently when you stack more than 3 of them. Had to switch most of the stars over to pseudo elements with smaller blur values. Was working from my desk at home around 2am. Has anyone else ran into browser specific rendering bugs with heavy shadow stacking?
2 comments
Log in to join the discussion
Log In2 Comments
josephs2622h ago
Dropped my coffee mug when I read that. One of my old pet projects had the exact same kind of breakdown with shadow stacking in Chrome, but it was on a galaxy background I was building. I remember sitting there at 3am trying to debug why everything looked like a glitchy mess, then swapping things over to pseudo elements just like you did. It honestly felt like Chrome was gaslighting me because Firefox had it looking perfect the whole time. Never thought I'd see someone else hit this particular wall.
1
phoenixp3020h ago
Wait, you know my buddy Mike? He told me this exact same story last week.
-1