Streaming live at 10am (PST)

How different browsers process Gradients

Not a bug… just wanted to show the differences in how different browsers process gradients.

What? Screen pixels being screen pixels and RGB values being RGB values, there is no reason for a gradient to look that off from a browser to another. Your issue is local most likely.

Look ffox os x / chrome os x / safari os x

what I see is what I’m showing you

  • same monitor. same website.

I move to a difference computer (tablets - iPad, a Window tablet, or a Droid Tablet)

  • exactly the same result as I originally showed you.

The only difference between what I’m doing and what’s here:

  • is I’m using 2 gradients… layer - one on top of another.

And notice… that’s it Chrome that looks different. This is what surprised me.

Yeah that seems odd. The only differences I have seen in gradients is between new and old versions of browsers, like older versions of Firefox not supporting gradients. I have yet to see gradients react the way you’ve shown. I will have to keep a eye out for this.

Ok, it’s about blending… give me more details to reproduce your 2 layers graient, I want to test on my side.



2 Linear Gradients

1 (Bottom)

Start / End

2 (Top)

Start / End

Have you noticed… you can EDIT / PREVIEW in Safari now ? Without the Ahh Shucks message ???

These are screen shots - directly from Edit Mode - Safari and Chrome.

Safari Edit Screen

Chrome Edit Screen

I have noticed the same thing on almost every site I have built as well. So basically I need to just change colors to work well on all browsers? Or is this a bug? Seems strange that they are completely darker when viewing on safari, firefox or ie. -notice the change in color within the header.

We are both talking apples here.

Same issue.

It’s not a bug with Webflow… it’s the different ways the different browsers process the request.

In your case… even the fonts are rendered a little differently.