javascript - jQuery css() changing 'transition-delay' to 'transition' in safari -

the following code produces expected result in chrome, is; adding transition-delay directly elements.

$('.front-nav .sub-menu').each(function() {     var transitiondelay = 50;     $(this).find('li').each(function( index ) {         var thisdelay = transitiondelay * index;         thisdelay = thisdelay + 'ms';         $(this).css('transition-delay', thisdelay);     }); }); 

in safari instead of transition-delay, transition style added element.

the style added jquery in safari: style="transition: 50ms; -webkit-transition: 50ms;

the style added jquery in chrome: style="transition-delay: 0ms; -webkit-transition-delay: 0ms;"

i stumbled upon question because had same one. little experimentation, found seems safari behaving properly, in misleading way. if load jquery blank page , try set transition-delay property on element using method, inspector show transition: ___, if query element's transition property, you'll see set properly:

// in console $(document.body).css('transition-delay', '0.3s') // sets `transition: 0.3s` on body $(document.body).css('transition') // "all 0s ease 0.3s" 

so see it's doing want. issue having when having multiple transitions different values. example:

$(document.body).css('transition-delay', '0.3s, 2s') 

this appears set transition: 0.3s, 2s on element in inspector, suggesting 0.3s duration , 2s delay, when ask transition-delay property, you'll see it's still 0s. think poor way on safari's part of showing styles in inspector.

aside apparent styles applied, noticing different behavior in safari?