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

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -