0

Here is the code:

$('#pocetak h1.rastavljac').css({
    'background':'#3578ff;',
    'background':'-moz-linear-gradient(left,  #3578ff 0%, #7AA6ff 15%, #7AA6ff 85%, #3578ff 100%)',
    'background':'-webkit-gradient(linear, left top, right top, color-stop(0%,#3578ff), color-stop(15%,#7AA6ff), color-stop(85%,#7AA6ff), color-stop(100%,#3578ff))',
    'background':'-webkit-linear-gradient(left,  #3578ff 0%,#7AA6ff 15%,#7AA6ff 85%,#3578ff 100%)',
    'background':'-o-linear-gradient(left,  #3578ff 0%,#7AA6ff 15%,#7AA6ff 85%,#3578ff 100%)',
    'background':'-ms-linear-gradient(left,  #3578ff 0%,#7AA6ff 15%,#7AA6ff 85%,#3578ff 100%)',
    'background':'linear-gradient(to right,  #3578ff 0%,#7AA6ff 15%,#7AA6ff 85%,#3578ff 100%)',
    'filter':'progid:DXImageTransform.Microsoft.gradient( startColorstr="#3578ff", endColorstr="#3578ff",GradientType=1 )',
    'color':'#FFFFFF','transition':'all 600ms ease 0s'});

Now, all of it works fine on desktop browsers, but on android browser and on IOS browser, the colors don't change. However after a little fiddling I found out that if I put web-kit property as last it works fine on mobile platforms, but then it doesn't work in Firefox on desktop :(. Any ideas?

Damiao
  • 51
  • 5
  • I tried this fiddle on Firefox 25 on OSX and I see the gradient perfectly. http://jsfiddle.net/56bPD/ – Bas van Dijk Dec 15 '13 at 15:28
  • http://stackoverflow.com/a/8020328/1836314 – matpop Dec 15 '13 at 15:50
  • as I said it works fine on desktop browsers, but not on android browser (except when I put web-kit property first, but then it doesn't work in Firefox on desktop). Your fiddle isn't showing either on android... – Damiao Dec 15 '13 at 15:56
  • @Damiao Did you see the answer I linked? I'm not flagging this just because I think it's not an exact duplicate. – matpop Dec 15 '13 at 16:15
  • @matpop Sorry, I overlooked your link. I've read the thread, but if it's true, how come it acctualy works on all desktop platforms, except IE of corse? – Damiao Dec 15 '13 at 16:19
  • @Damiao Most browsers now support `linear-gradient` without prefix, Android still needs it (http://caniuse.com/css-gradients) – matpop Dec 15 '13 at 16:26
  • I found some kind of workaround for this problem thanks to matpop's link, that gave me the idea to write "background-image", instead of just "background" for "web-kit" property and now it works on android browser. Thanks matpop... – Damiao Dec 15 '13 at 16:36
  • @Damiao OK, but be aware that at least five of your `background` rules will still be ignored. – matpop Dec 15 '13 at 16:47

0 Answers0