Slow animation with webkit-transform translate() in iPhone OS 3.0
only the translate3d() and scale3d() functions are hardware accelerated on mobile safari.
Admin
Updated on July 05, 2022Comments
-
Admin almost 2 years
Has something changed in JavaScript handling in iPhone OS 3.0? This code works in Safari 4 Public Beta and in iPod Touch 2.0, but not in iPod touch with iPhone OS 3.0. The purpose is to move the box a little to the right in 2 seconds, but in 3.0 it just jumps to the new location without animation or delay.
<html> <head> <meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <title>iPhone JS testing</title> <style type="text/css"> .box{ position: absolute; width: 150px; height: 150px; background-color: red; -webkit-transition-property: -webkit-transform; -webkit-transition-duration: 2.0s; } .move{ -webkit-transform: translateX(100px); } </style> <script src="jquery-1.3.2.min.js" type="application/x-javascript"></script> </head> <body> <script type="text/javascript"> $(function () { $(".box").click(function(){ $(this).addClass("move"); }); }); </script> <div class="box"></div> </body> </html>I can go around this by using left as the transition property, but that's giving me other kind of issues when I'm trying to integrate this to my project (basically I'd need to combine dragging movement and animated movement and the dragging uses translate and the animation left-property which isn't nice. I don't know if the dragging can be implemented using left-property). Any idea what might be wrong in the code above or is this a feature from iPhone OS 3.0 onwards?