Hey guys, I wanted to get your take on something.
Our new website uses gradients over background images/videos. They look great in Chrome and Firefox, but look really bad in Safari.
Have you guys encountered this? If so, is there a good solution?
Here’s our website for reference:
http://the-digital-collective.webflow.io/
Thank you all in advance!
Care to share the poo screenshot? Not that I can help with the issue but I’d rather know beforehand if there are any problems with css gradients on my own projects. Thanks!
You need to try to replicate this using simple test layout. I don’t believe this is how safari renders gradients by default. Create a new project, div and gradient exactly the way you did it in the project but using as few objects as possible and as little style changes as necessary and see if it looks like that.
Sure enough!
Did a simple test (link below) and it doesn’t look terrible in Safari. Wonder what’s going on with the first site I linked.
Here’s the test replica that looks fine in Safari for some reason:
http://the-digital-collective-68c1b5.webflow.io/
You should post your read-only link if you want someone to test your setup on Safari
Thanks for the suggestion Alex!
Here’s the link to our site we’re troubleshooting:
https://preview.webflow.com/preview/the-digital-collective?preview=bb71ec224ed6e63199c0854739c520ae
Here’s a link to the test that works for some reason:
https://preview.webflow.com/preview/the-digital-collective-68c1b5?preview=3ec6269fe9a559826679066a8bb55a7f
Solved! Thanks @dram for helping me troubleshoot!
Basically, the transparent value of the gradient should be set to ‘transparent’ explicitly. I had set it to rgba(255, 255, 255, 0) before (or white with 0% opacity)
Thanks again!
Nice job hunting down the problem! Trying to replicate the bug from scratch is my usual goto method.
This topic was automatically closed after 60 days. New replies are no longer allowed.
