My radial gradient spiral broke Safari for 3 days, dumb fix in the end

I was building this conch shell design for a beach themed CSS art piece, all layered radial gradients to get that spiral depth. Everything looked perfect in Firefox and Chrome. Then I opened it on my wife's MacBook with Safari and the whole thing just crumbled into this flat mess of overlapping stripes. I spent 3 evenings tweaking color stops, trying different spacing, even rebuilt the whole spiral from scratch with conic gradients. Nothing worked. Then I noticed the pattern was also shifting whenever I scrolled. Turns out Safari hates it when you use a negative background-position value combined with a percentage on a repeating radial gradient. I switched to fixed pixel offsets and it snapped right into place. Has anyone else hit that specific Safari quirk with repeating gradients?

1 comments

1 Comment

nora73516d ago

...and of course it turns out the bug was basically "Safari eats negative numbers with a side of percentages." I feel your pain, three evenings is rough. I once lost a whole weekend to a Safari thing where it refused to render box shadows on an element that also had a transform, and the fix was literally adding one line of CSS that did nothing. Your conch shell sounds way cooler than my square button, though. At least you can say you beat Safari with pixel offsets, I just gave up and used a solid color.