CODEWITHSUNDEEP
javascriptjquerycss
Jeger
Jeger

Reputation: 500

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

The following code produces the expected result in chrome, that is; adding transition-delay directly to all the 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, a transition style is added to the element.

The style added by jQuery in safari: style="transition: 50ms; -webkit-transition: 50ms;

The style added by jQuery in chrome: style="transition-delay: 0ms; -webkit-transition-delay: 0ms;"

Upvotes: 2

Views: 3786

Answers (1)

sunny-mittal
sunny-mittal

Reputation: 509

I stumbled upon this question because I had the same one. With a little experimentation, I found that it seems Safari is behaving properly, just in a misleading way. If you load jQuery into a blank page and try to set the transition-delay property on an element using your method, the inspector will only show transition: ___, but if you then query the element's transition property, you'll see it was actually 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 we see that it's doing what we want. The issue I was having was when having multiple transitions with different values. For example:

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

This appears to set transition: 0.3s, 2s on the element in inspector, suggesting 0.3s duration and 2s delay, but when you ask for the transition-delay property, you'll see it's still 0s. I think this is just a poor way on Safari's part of showing styles in the inspector.

Aside from the apparent styles applied, are you noticing truly different behavior in Safari?

Upvotes: 1

Related Questions