移动Safari中的CSS3转换会中断CSS属性更改吗？

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. 我正在使用CSS3过渡来使其平滑移动。 It works great on Firefox, Chromium (Google Chrome), and Safari (Windows), Android Browser (2.3.7), and Firefox Mobile for Android (aka Fennec). 它在Firefox，Chromium（Google Chrome）和Safari（Windows），Android Browser（2.3.7）和Firefox Mobile for Android（又名Fennec）上都可以很好地工作。 On Internet Explorer, it ignores the transition property and just moves the element suddenly as expected. 在Internet Explorer上，它会忽略transition属性，只是按预期方式突然移动元素。

It's not working on Mobile Safari, though. 不过，它无法在Mobile Safari上运行。 If I have -webkit-transition defined, the element doesn't move at all. 如果定义了-webkit-transition ，则该元素完全不会移动。 I'm testing with a 1st gen iPod Touch, so this may only be an issue with older versions. 我正在使用第一代iPod Touch进行测试，因此这可能仅是旧版本的问题。 My iOS version is 3.1.3 (7E18). 我的iOS版本是3.1.3（7E18）。

JavaScript animation effects (via jQuery) work okay, but don't run as smoothly on any of the devices mentioned. JavaScript动画效果（通过jQuery）可以正常工作，但在上述任何设备上运行均不流畅。 I'd rather use the CSS3 solution. 我宁愿使用CSS3解决方案。

Is this a problem with newer iOS devices as well? 这也是较新的iOS设备的问题吗？

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. 就像我说过的那样，除非删除-webkit-transition行，否则该元素不会在Mobile Safari中移动。

<!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 :) 最好的选择是更新到iOS 5-较新的软件修复了旧的错误...这就是为什么我们都讨厌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. 我刚刚检查了几个移动框架，它们的支持矩阵始于iOS 3.2 +列出了几个不支持的第一个版本3.1.3。

Also, you might want to try console.logging & checking your logs from the iOS safari debug console. 另外，您可能想尝试console.logging并从iOS Safari调试控制台中检查日志。 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. 甚至链接中的哈希标签也可能导致此问题。

移动Safari中的CSS3转换会中断CSS属性更改吗？

问题描述

1 个解决方案

解决方案1
0 2012-01-23 21:09:08

移动Safari中的CSS3转换会中断CSS属性更改吗？

问题描述

1 个解决方案

解决方案1 0 2012-01-23 21:09:08

解决方案1
0 2012-01-23 21:09:08