Issue with CSS3 gradient in Safari -
i tried replicate starburst effect using css3 gradients. after fiddling, figured out, test in safari , have go nuts. it's safari using 180deg chrome render 270deg or something.
here's code: http://codepen.io/syren/pen/ahkrv
any input have helpful. in advance!
update: noticed on tutorial: http://camenischcreative.com/blog/2011-04-26, same bug occurred in chrome, worked in safari. noticed used -90deg 90deg, rewrote -webkit-gradient- prefixed gradients in range , works. , since chrome uses linear-gradient, uses 180deg 360deg gradients , works.
i left problematic prefixed gradient commented out, see problem, uncomment it.
so problem solved, i'm still curious if else has encountered problem , why think is?
the reason in "overlay" did not included vendor specific gradients properties.
missing vendor-prefixed css gradients firefox 3.6+, old webkit (safari 4+, chrome), opera 11.1+.
if want support browser too, have this:
/* ff3.6+ */ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* chrome,safari4+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* chrome10+,safari5.1+ */ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* opera 11.10+ */ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* ie10+ */ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* w3c */ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
you using webkit-linear-gradient , linear-gradinet.
Comments
Post a Comment