Переход CSS3 в мобильном Safari нарушает изменение свойств CSS? - PullRequest
Новая
       30

Переход CSS3 в мобильном Safari нарушает изменение свойств CSS?

0 голосов
/ 05 января 2012

У меня есть страница с элементом, который перемещается при срабатывании определенных событий. Я использую переход CSS3, чтобы сделать его плавным. Он отлично работает на Firefox, Chromium (Google Chrome) и Safari (Windows), браузере Android (2.3.7) и Firefox Mobile для Android (например, Fennec). В Internet Explorer он игнорирует свойство перехода и просто перемещает элемент внезапно, как и ожидалось.

Это не работает на мобильном Safari, хотя. Если я определил -webkit-transition, элемент вообще не двигается. Я тестирую с iPod Touch 1-го поколения, так что это может быть проблемой только со старыми версиями. Моя версия iOS 3.1.3 (7E18).

Эффекты анимации JavaScript (через jQuery) работают нормально, но не работают так же гладко на любом из упомянутых устройств. Я бы лучше использовал решение CSS3.

Это проблема и с новыми iOS-устройствами?

Задокументирована и объяснена ли проблема? Если да, может ли кто-нибудь предоставить ссылку?

Есть ли обходной путь?

Я создал простую тестовую страницу, демонстрирующую мою проблему. Как я уже сказал, элемент не перемещается в Mobile Safari, пока я не удалю строку -webkit-transition. 

<!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>

Спасибо.

1 Ответ

0 голосов
/ 24 января 2012

Лучше всего было бы обновить до iOS 5 - более новое программное обеспечение исправляет старые ошибки ... Именно поэтому мы все ненавидим ie6:)

Я только что проверил пару мобильных фреймворков и их матрицу поддержки(es) начните с iOS 3.2 + пара, указавшая 3.1.3 в качестве первой версии, которую они НЕ поддерживают.

Кроме того, вы можете попробовать console.logging и проверить свои журналы из консоли отладки iOS safari,И вы можете попробовать привязку к событию касания вместо обработчика щелчков по умолчанию для ссылок.Может быть что-то вроде привередливого.Даже хеш-тег в ссылке может быть причиной проблемы.

...