CSS3 transition in mobile Safari breaks CSS property changes?

Question

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 (aka 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.

Answer 1

Your best bet would be to update to iOS 5 - newer software fixes old bugs... Which is why we all hate ie6 :)

I just checked a couple of mobile frameworks, and their support matrix(es) start at iOS 3.2 + a couple listed 3.1.3 as the first version they DON'T support.

Also, you might want to try console.logging & checking your logs from the iOS safari debug console. And you might want to try binding to a touch event instead of the default click handler for links. Could be something finnicky like that. Even the hash tag in the link could be causing the problem.

CSS3 transition in mobile Safari breaks CSS property changes?

Question

1 answers

solution1
0 2012-01-23 21:09:08

CSS3 transition in mobile Safari breaks CSS property changes?

Question

1 answers

solution1 0 2012-01-23 21:09:08

solution1
0 2012-01-23 21:09:08