CODEWITHSUNDEEP
csscross-browsergradient
Genocide_Hoax
Genocide_Hoax

Reputation: 853

Gradient - Cross Browser uniformity

I was testing gradient compatibility across all browsers and I found that the gradient had different effects on FireFox. Allow me to demonstrate the test.

The Code

<html>
    <head>
        <style type="text/css">
            body{
                background: -moz-linear-gradient(top left , white , black 25%);
                background: -o-linear-gradient(top left , white , black 25%);
                background: -webkit-linear-gradient(top left , white , black 25%);
                background: -khtml-linear-gradient(top left , white , black 25%);
                background: -ms-linear-gradient(top left , white , black 25%);
                background:  linear-gradient(top left , white , black 25%);
            }
        </style>
    </head>
    <body>
    </body>
</html>

Results:

Google Chrome - 35.0 Google Chrome - Version 35.0.1916.153 m

FireFox - 30.0 FireFox - 30.0

IE11 IE 11

Opera 22.0 Opera 22.0

Safari 5.1.7 Safari 5.1.7

As you can see the gradient takes a different shape in case of Firefox. How to overcome this limitation?

Upvotes: 1

Views: 231

Answers (4)

Mr Lister
Mr Lister

Reputation: 46559

The existing answers, while doing a good job at solving the problem, don't address the actual question, which is: why don't all browsers behave the same with this source?

The answer is, Quirks mode. Different browsers have different quirks!
So the way to make the example code come out the same is to insert a proper DOCTYPE declaration on top

<!DOCTYPE html>

so that the document is displayed in Standards mode. Then the differences will disappear; all browsers will show it the way Firefox does now.

Upvotes: 0

King King
King King

Reputation: 63327

In fact the body does not have explicit height set, by default its margin is about 8px, so its height is just about 8px. Here in this demo, we set background-repeat to no-repeat, you'll see why by default (repeat) it renders to what you saw. However I have to admit that there is a special thing about the body element. Looks like the background can still render outside the body. You can use element inspector to see that the body's height is in fact just about 8px. But the background can still be rendered out of it. We can solve this by setting the height explicitly:

body {
    /* ... */
    height:100vh;
}

Or:

body, html {
    height: 100%;
}

Or you can also set the background-size explicitly:

body {
   /* ... */
   background-size:100vw 100vh;
}

Upvotes: 1

user1853128
user1853128

Reputation: 1114

Try this, it will be helpful to you which supports all the browsers:

CSS:

div{
    width:500px;
    height:200px;
    background:#000;
    background: -webkit-linear-gradient(-45deg, #fff 0%, #000 36%, #000 51%, #000 71%, #000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #fff 0%, #000 36%, #000 51%, #000 71%, #000 100%); /* Opera 11.10+ */
    background: -moz-linear-gradient(-45deg, #fff 0%, #000 36%, #000 51%, #000 71%, #000 100%); /* FF3.6+ */
    background: -webkit-gradient(left top, right bottom, color-stop(0%, #fff), color-stop(36%, #000), color-stop(51%, #000), color-stop(71%, #000), color-stop(100%, #000));/* Chrome,Safari4+ */
    background: -ms-linear-gradient(-45deg, #fff 0%, #000 36%, #000 51%, #000 71%, #000 100%); /* IE 10+ */
    background: linear-gradient(135deg, #fff 0%, #000 36%, #000 51%, #000 71%, #000 100%);/* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#000', GradientType=1 );/* IE6-9 fallback on horizontal gradient */

}

HTML:

<div></div>

IE9 Support:

Support for full multi-stop gradients with IE9 (using SVG). Add a "gradient" class to all your elements that have a gradient, and add the following override to your HTML to complete the IE9 support:

<!--[if gte IE 9]
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->

Fiddle Demo

Upvotes: 0

Amit
Amit

Reputation: 1919

use this. http://jsfiddle.net/Vca7f/1/ this will work in IE9 also. to generate more gradient you can visit http://www.colorzilla.com/gradient-editor/ its very good tool for generating gradient. 

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);

Upvotes: 0

Related Questions