Question

我有一个页面，其元素在某些事件触发时移动。我正在使用CSS3过渡使其顺利移动。它适用于Firefox，Chromium（谷歌浏览器），Safari（Windows），Android浏览器（2.3.7）和Android版Firefox移动（a.k.a. Fennec）。在Internet Explorer上，它忽略了transition属性，只是按预期方式突然移动元素。

但它不适用于Mobile Safari。如果我定义了-webkit-transition，则该元素根本不会移动。我正在测试第一代iPod Touch，所以这可能只是旧版本的问题。我的iOS版本是3.1.3（7E18）。

JavaScript动画效果（通过jQuery）工作正常，但不能在提到的任何设备上顺利运行。我宁愿使用CSS3解决方案。

对于较新的iOS设备，这是一个问题吗？

是否记录并解释了问题？如果是这样，有人可以提供链接吗？

有解决办法吗？

我创建了一个简单的测试页面来演示我的问题。正如我所说，除非我删除-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>

谢谢。

Answer 1

你最好的选择是更新到iOS 5 - 更新的软件修复了旧的错误...这就是为什么我们都讨厌ie6 :)

我刚检查了几个移动框架，他们的支持矩阵从iOS 3.2 +一对列出的3.1.3开始，作为他们不支持的第一个版本。

另外，您可能想尝试console.logging＆amp;从iOS safari调试控制台检查日志。您可能希望尝试绑定到触摸事件而不是链接的默认单击处理程序。可能是像这样的东西。甚至链接中的哈希标记也可能导致问题。

移动版Safari中的CSS3过渡打破了CSS属性的变化？

1 个答案: