Streaming live at 10am (PST)

Gradients Not Showing Properly in Safari


#1

I have white gradients inside my blog post thumbnails so that the excerpt of the post fades out of view, letting you know there is more to be read. These gradients look great in Chrome, but in Safari—not so much (screenshots below). I tried putting a white (as opposed to transparent) background on the link block which serves as the wrapper for everything, but that didn't work. Anyone know how to resolve this? Thanks in advance!






Here is my public share link: https://preview.webflow.com/preview/jumpla?preview=e3dd2bbca2432a73557c00b1c2c99e94


#2

Safari can render transparent as the color black with a 0% opacity. To fix this, change any gradient stops from transparent to rgba(255, 255, 255, 0). :+1:

Example: On your News-White Gradient, changing the stop you have at 24% from transparent to rgba(255, 255, 255, 0) looks like this in Safari :slight_smile::


#3

MAYNE, YOO DA BESS, MAYNE!!! :joy: :joy: :joy: :joy: :joy:

@McGuire, FTW.


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.