Help with browser compatibility and radial gradient CSS code

Hi,

My website loads perfectly ok in Chrome, but when I try it in other browsers like safari, firefox, IE… Everything is a mess…

Could someone help me out, and explain me where is the problem, or how can I solved it to visualized the web in the rest of browser the as good as it looks on chrome?

Please visit the online store section and you’ll see the difference between browsers.

Thank you.


Here is my public share link: LINK
([how to access public share link][2])

pass: ledonet!

Hi @Pablo_Ledo

Thanks for posting!

It looks like the design isn’t showing up as expected across all browsers because of the custom code.

You will have to add some more custom code to this to fix the issue. You may find this resource helpful when adding browser compatibility to your custom code.

I hope this helps!

Hi @Brando thanks for your promp answer! But I might have explain myself poorly about the problem I’m experiencing… The problem with the visualization I have find out is exactly with webflow’s radial gradient CSS code, it does not support all the browsers… Digging a little bit I’ve found this page Ultimate CSS Gradient Generator - ColorZilla.com that gives a full multi-browser CSS code for gradientes… Know that I know what is exactly causing the poor visualization in all browsers but chrome. I would need to know how could I apply that custom CSS to the class with the radial gradient background. Any ideas on how to solve it?

Please, checkout out the difference on how webflow’s gradient code is manage with chrome or safari in the image attached. Is that something you might be able to solve within the tool? Or is that a bug to solve?

Chrome:

Safari:

Thank you very much as always!!!

So, for example… I would need to make the gradient class “overlay-estrella” (and so on with the rest of the products) multi-browser compatible.

background-image: -webkit-radial-gradient(circle farthest-corner at 29% 53%, transparent 10%, hsla(0, 0%, 100%, .9));
background-image: radial-gradient(circle farthest-corner at 29% 53%, transparent 10%, hsla(0, 0%, 100%, .9));
}

@Pablo_Ledo

Thanks for clarifying!

After investigating this further with the team, I found that this is a known issue with Safari.

When you have a gradient set to a transparent color it is defaulted to 0% opacity on the hex code#000.

As a workaround, instead of using transparent, you can use the color #FFF with a 0% opacity.

Hope this helps!

Using gradients of 2 solid colors also fixes this issue.

@Brando Thank you… That solution solve the problem. #fff color, then 0% opacity.

2 Likes

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