Streaming live at 10am (PST)

How different browsers process Gradients


#1

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


Font Weight Gets Lighter on Safari
#2

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

http://sab.webflow.com/shadows


#3

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: http://sab.webflow.com/shadows
- 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.


#4

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.


#5

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


#6

(3 COLUMN ROW)

SECTION.CONTAINER.ROW.COLUMN2

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


#7

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.

http://celebrationpartyrental.webflow.com/ -notice the change in color within the header.


#8

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.


#9

#10