css - Linear background image doesnt work properly on safari -


i have following code:

body{   background:red; }  div{   width:100%;   height:100%;       background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));     background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));     background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0)));     background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));     background-image: -o-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));     background-image: linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));     background-repeat: repeat-x; } 

and html:

<div>   test </div> 

as can see here, displayed differently between chrome , safari:

http://codepen.io/anon/pen/apwogj

why happening?

check out, goes white, white 0 transparency. seems work same on chrome , safari me.

div{   width:100%;   height:100%;   background: #fff;   background: -webkit-linear-gradient(left, rgba(255,255,255,1), rgba(255,255,255,0));   background: -o-linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0));   background: -moz-linear-gradient(right, rgba(255,255,255,1), rgba(255,255,255,0));   background: linear-gradient(to right, rgba(255,255,255,1) , rgba(255,255,255,0)); } 

also make solid colour background @ top incase browser doesn't support gradient revert solid colour.

if have solid background there no need transparency, use solid colours.

background: -webkit-linear-gradient(left, #fff, red); background: -o-linear-gradient(right, #fff, red); background: -moz-linear-gradient(right, #fff, red); background: linear-gradient(to right, #fff, red); 

this gradient white red background red(change red whatever background colour is)


Comments

Popular posts from this blog

python - How to insert QWidgets in the middle of a Layout? -

python - serve multiple gunicorn django instances under nginx ubuntu -

module - Prestashop displayPaymentReturn hook url -