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
Post a Comment