css - Gradient - Cross Browser uniformity -
i testing gradient compatibility across browsers , found gradient had different effects on firefox. allow me demonstrate 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 
firefox - 30.0 
ie11 
opera 22.0 
safari 5.1.7 
as can see gradient takes different shape in case of firefox. how overcome limitation?
in fact body not have explicit height set, default margin 8px, height 8px. here in this demo, set background-repeat no-repeat, you'll see why default (repeat) renders saw. have admit there special thing body element. looks background can still render outside body. can use element inspector see body's height in fact 8px. background can still rendered out of it. can solve setting height explicitly:
body { /* ... */ height:100vh; } or:
body, html { height: 100%; } or can set background-size explicitly:
body { /* ... */ background-size:100vw 100vh; }
Comments
Post a Comment