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

发布于 2024-12-25 09:51:24 字数 2560 浏览 4 评论 0原文

我有一个页面，其中的元素在某些事件触发时会移动。我使用 CSS3 过渡来使其平滑移动。它在 Firefox、Chromium (Google Chrome)、Safari (Windows)、Android 浏览器 (2.3.7) 和 Firefox Mobile for Android（又名 Fennec）上运行良好。在 Internet Explorer 上，它忽略转换属性，只是按预期突然移动元素。

但它不适用于 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>

谢谢。

原文

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.

分享到QQ

分享到微博