CSS

Safari Gradient Greying Out Bug

Safari has some beef with “transparent”.

Basically, in Safari, “transparent” is equivalent to rgba(0,0,0,0). Which is fine if it’s just a pure color. But when it comes to gradient, it gives the transition a sketchy dark hue.

// So instead of this:
background: radial-gradient(red 0%, transparent 70%);

// Use a specific color of rgba:
background: radial-gradient(red 0%, rgba(255,255,255,0) 70%);

Also remember that clearing cache in Safari has to be manually done: Menu -> Develop -> Empty Cache, or Alt+Command+E.

Standard

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.