CODEWITHSUNDEEP
csssafari
AmbroseChapel
AmbroseChapel

Reputation: 12087

Is there a bug in Safari with linear gradients? I get unexpected results

When I use the following code, which I'm seeing in essentially the same form in lots of tutorials:

body { 
    background-image: -webkit-gradient(linear, 
    0% 0%, 0% 100%, from(#000), to(#fff)); 
}

I get this result (Safari 5.0.5):

https://i.sstatic.net/PJo6c.jpg

multiple repeated 8px gradients.

Upvotes: 0

Views: 914

Answers (2)

AmbroseChapel
AmbroseChapel

Reputation: 12087

Answering my own question:

The screenshot above is from a page with absolutely no content in the body. Apparently with Safari, the body is 8px high if it's empty? And the gradient also displays over the whole viewport, even if only applied to the body ... ?

I would love to have an explanation, but anyway, the fix is this:

html, body { height: 100%; }

because for some reason body { height: 100%; } isn't enough.

Upvotes: 2

Cᴏʀʏ
Cᴏʀʏ

Reputation: 107508

What happens if you change from from() and to() to using color-stops?

background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #000),
    color-stop(1, #FFF)
);

It shouldn't be repeating unless you used -webkit-repeating-linear-gradient.

Resources

Upvotes: 1

Related Questions