I have a page with an element that moves when certain events fire. I'm using a CSS3 transition to make it move smoothly. It works great on Firefox, Chromium (Google Chrome), and Safari (Windows), Android Browser (2.3.7), and Firefox Mobile for Android (a.k.a. Fennec). On Internet Explorer, it ignores the transition property and just moves the element suddenly as expected.
It's not working on Mobile Safari, though. If I have -webkit-transition defined, the element doesn't move at all. I'm testing with a 1st gen iPod Touch, so this may only be an issue with older versions. My iOS version is 3.1.3 (7E18).
JavaScript animation effects (via jQuery) work okay, but don't run as smoothly on any of the devices mentioned. I'd rather use the CSS3 solution.
Is this a problem with newer iOS devices as well?
Is the problem documented and explained? If so, can someone provide a link?
Is there a work-around?
I've created a simple test page demonstrating my problem. As I've said, the element doesn't move in Mobile Safari unless I remove the -webkit-transition line.
<!doctype html>
<html>
<head>
<meta name="viewport" content="initial-scale=1">
<style type="text/css">
#box {
border: 3px outset gray;
font-size: xx-small;
color: silver;
background-color: black;
position: absolute;
width: 50px;
height: 50px;
top: 100px;
left: 220px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
}
a {
display: table-cell;
text-align: center;
vertical-align: middle;
color: black;
text-decoration: none;
width: 100px;
height: 100px;
background-color: silver;
border: 2px outset gray;
}
</style>
<script type="text/javascript">
var box;
window.onload = function(){
box = document.getElementById("box");
}
var getTop = function(obj){
var curtop = obj.offsetTop;
obj = obj.offsetParent;
while (obj){
curtop += obj.offsetTop;
obj = obj.offsetParent;
}
return curtop;
};
var moveUp = function(obj){
var curtop = getTop(obj);
obj.style.top = (curtop - 20) + "px";
return false;
};
var moveDown = function(obj){
var curtop = getTop(obj);
obj.style.top = (curtop + 20) + "px";
return false;
};
</script>
</head>
<body>
<div id="box">
<p>This is the box.</p>
</div>
<a href="#" onclick="return moveUp(box);">Move Up</a>
<a href="#" onclick="return moveDown(box);">Move Down</a>
</body>
</html>
Thank you.
