Site looking different on Safari and Chrome

Here is my view link
https://preview.webflow.com/preview/goldcast?utm_medium=preview_link&utm_source=designer&utm_content=goldcast&preview=b3a19f3625bb561895c7b7d4a2160920&mode=preview

There is a lot of differences between my website on chrome and Safari
How do i fix them?

This is the site on chrome
image

This is the site on Safari

this is the html embed i have used for the gradient
i set the background of the text to the gradient and add this class

<style>
.clipped {
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
</style>

Welcome to the community @Salad_xd!

Hmmm, I can’t say for sure why your code isn’t working as expected as I only have an iPad Pro to test Safari links (which doesn’t easily allow for code inspection) but I see this same affect on a number of text elements around the site. Does the problem only happen on this specific instance, or does it happen everywhere you’re using the clipping?

I know it may be a bit of extra work, but you could also try using Webflow’s native functionality for this effect that was released in August of this year:

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