Safari ios (iphone and ipad) working properly only when clicking in devtools

Question

I have this weird issue happening only in safari ios:

As you can see from the gif above (click on it to see it properly), the div is not moving unless I click on it in developer tools . I'm not changing any code and the div starts functioning correctly.

Anyone have any ideas why this is happening on ios (not happening on desktop safari)?

I'm using transition: margin-left 500ms ease; on body and then change margin of the div (I keep the vendor prefix -webkit-).

Thanks!

Answer 1

I've experienced a similar issue and it appears to be due to how Safari deals with jQuery animations.

A workaround rather than a fix, but if you use jQuery.css() rather than jQuery.animation(), the issue shouldn't occur. You can then use css animations instead. You could probably use css classes to set the margin-left and just add/remove a class using jQuery on click too.

Cheers

Matt