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

Question

我有一个页面，其中包含在某些事件触发时会移动的元素。 我正在使用CSS3过渡来使其平滑移动。 它在Firefox，Chromium（Google Chrome）和Safari（Windows），Android Browser（2.3.7）和Firefox Mobile for Android（又名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并从iOS Safari调试控制台中检查日志。 并且您可能想尝试绑定到触摸事件，而不是链接的默认单击处理程序。 可能是那样的挑剔。 甚至链接中的哈希标签也可能导致此问题。

移动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