Gradients not working in jQuery

220 views Asked by At

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?

0

There are 0 answers