Safari iOS transition conversion not working

Question

Whenever I seem to apply some code to say that move the div, for example using the latest iOS Safari browser, it does not actually go between the two established rules. I tried to change the use of values ​​other than percentages, but still so far, I could never get it to work when I use transition: transform; for any used translate property.

I use the correct prefixes and tested support and should not work without problems.

http://caniuse.com/#search=transition

http://caniuse.com/#search=translate

Jsfiddle

 $('button').on('click', function() { $('.mydiv').toggleClass('added-class'); }); 

 .mydiv { display: inline-block; width: 100px; height: 50px; background-color: red; -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); -moz-transition: transform 0.6s ease-out; -o-transition: transform 0.6s ease-out; -webkit-transition: transform 0.6s ease-out; transition: transform 0.6s ease-out; } .added-class { -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); -webkit-transform: translateY(100%); transform: translateY(100%); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="mydiv"></div> <button type="button">Toggle class</button> 

Answer 1

In older versions of iOS Safari, only properties and values ​​with a vendor prefix and transition and transform are -webkit-transition: -webkit-transform , so instead of -webkit-transition: -webkit-transform , use -webkit-transition: -webkit-transform :

Jsfiddle

 $('button').on('click', function() { $('.mydiv').toggleClass('added-class'); }); 

 .mydiv { display: inline-block; width: 100px; height: 50px; background-color: red; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: -webkit-transform 0.6s ease-out; -moz-transition: transform 0.6s ease-out; -o-transition: transform 0.6s ease-out; transition: transform 0.6s ease-out; } .added-class { -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="mydiv"></div> <button type="button">Toggle class</button> 

Answer 2

Outline outline: none; in your button