Why are jquery .css transition edits not being applied in safari, but .css transform edits are?

Question

I'm trying to use jquery to edit the css of an element to give it a random transition time, then rotate the element.

This all works fine in chrome, but in safari the first line of css edits aren't made, so all the transitions occur at the predefined speed.

 var rspeed = (Math.random()/3)+0.6,
    rtext = 'transform ' + rj + 's ease-in-out';

$('#tile').css( '-webkit-transition',rtext).css( '-moz-transition',rtext).css( '-ms-transition',rtext).css( '-o-transition',rtext).css( 'transition',rtext);
$('#tile').css( 'transform','rotateY(180deg)');

Why aren't the first edits being applied in safari?

EDIT: Here's an example to try in safari that highlights the issue: http://jsfiddle.net/ianbutterworth/5fnSF/30/

Possible duplicate of stackoverflow.com/questions/7935815/… — ahb
– ahb, Commented Oct 23, 2014 at 15:58
I'm afraid it isn't a duplicate. I've added a jsfiddle example to highlight the issue — Ian
– Ian, Commented Oct 24, 2014 at 20:17

Ian · Accepted Answer · 2014-10-25 15:45:14Z

2

Problem solved, by changing the settings for 'all' transitions, rather than just 'transform'. The problem was that 'transform' needed -webkit- etc. prefixes. Adding 'all' is the shortest option

var rspeed = (Math.random()/3)+0.6,
    rtext = 'all ' + rj + 's ease-in-out';

$('#tile').css({'transition':rtext,'transform':'rotateY(180deg)'});

edited Oct 25, 2014 at 15:45

answered Oct 25, 2014 at 4:30

Ian

1,4671 gold badge15 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

aferreira · Accepted Answer · 2014-10-23 16:07:04Z

1

JQuery css edit the style attr of your element and not your CSS files. So each time you call .css() you override yours last changes.

When you have multiples rules use:

.css({ "-webkit-transition": rtext, "-moz-transition": rtext, ..., "transform": "rotateY(180deg)" })

to not override yours lasts rules.

answered Oct 23, 2014 at 16:07

aferreira

111 bronze badge

3 Comments

Ian Over a year ago

thanks. I appreciate that your answer is correct logically, but unfortunately it's not solved the issue. The rotateY css change is applied but not the transition settings still

Ian Over a year ago

This jsfiddle highlights my issue. Try this in Safari vs other browsers: jsfiddle.net/ianbutterworth/5fnSF/27

Ian Over a year ago

(Note that I'm not using prefixing here because jquery is handling that automatically, but the issue remains when prefixing explicitly)

Collectives™ on Stack Overflow

Why are jquery .css transition edits not being applied in safari, but .css transform edits are?

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related