Преобразования iOS6 UIwebView CSS3D не ускоряются

У меня проблемы с плохой производительностью прокрутки в компоненте UIWebView iOS6. Однако прокрутка iOS5 была очень жидкой. Поэтому я немного искал веб-сайт и нашел это (часть бета-версии iOS6).

WebKit не всегда создает аппаратные ускорения для элементов с параметром -webkit-transform: preserve-3d. Авторы должны прекратить использовать этот параметр в качестве способа получения аппаратного ускорения.

Это может быть причиной, поскольку на html-сайте, отображаемом моим приложением, используется множество преобразований css3. У кого-нибудь есть решение или совет, как заставить webview переключиться на ускоренную модель рендеринга?

Ответ 1

UIWebView по-прежнему выполняет аппаратное ускорение, если вы используете 3D-преобразование (например, -webkit-transform: translateZ(0)). Этого больше нет, если вы используете только -webkit-transform-style: preserve-3d.

Если у вас есть пример, который выполняет 3D-преобразования, но стал более медленным с iOS 6, вы должны сообщить об этом в Apple Bug Reporter.

Ответ 2

Помимо уже упомянутого изменения CSS-свойств, которые являются (или не являются) запуском аппаратного ускорения, я заметил еще одно изменение в iOS6, которое не так сильно сохранялось на iOS5 (или, по крайней мере, я этого не замечал раньше): Перекрытие между аппаратно-ускоренными элементами и элементами без ускорения замедляет рендеринг, а приложение A LOT.

Если у вас есть перекрытия между ускоренными и неускоренными элементами, убедитесь, что вы добавляете аппаратное ускорение к этим другим элементам, даже если они не анимированы или так, потому что они также будут повторно отображены, что полностью подавит или в некоторых случаях вернуть эффект ускорения.

Я также написал короткую статью об этом, если вы хотите проверить это: http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/

Ответ 3

Я прикрепил простой тестовый пример, который воспроизводит эту ошибку в iOS6 и отлично работает на iOS5.1 (как на iPhone 4, так и на 4S). Приложение iOS Chrome - это хорошее место для запуска этого теста, поскольку оно включает UIWebView. У меня есть видео, которое я буду прикреплять, когда он загрузит два iPhone 4 (верхний номер iOS 5.1, другой, работающий под управлением iOS 6), который запускает этот пример script внутри PhoneGap 2.0 UIWebView.

Прямо сейчас, похоже, что эти элементы ARE становятся аппаратно ускоренными, но есть ошибка в низкоуровневом конвейере Apple, который убивает производительность. Мы пробовали ряд обходных решений для аппаратного ускорения, и, безусловно, кажется, что все, что вызывает GPU на iOS5.1, вызывает значительное замедление на iOS6.

Мне бы хотелось найти исправление, так как приложение, которое мы строим, в значительной степени полагается на это, работая должным образом. Если кто-то может указать ошибку в этом примере, это также будет чрезвычайно оценено.

EDIT: Ошибка сохраняется, даже если вы изменяете функцию анимации следующим образом.

function animate(node) {
    node.style.webkitAnimation = 'sample 5s infinite';
    node.style.webkitPerspective = 1000;
    node.style.webkitBackfaceVisibility = 'hidden';
}

Это, похоже, подтверждает, что вызов GPU вызывает это замедление.

РЕДАКТИРОВАТЬ 2: В дополнительном примере размещен http://bvgam.es/apple/, который гладко выполняется на iOS 5.1 и получает 1-2 FPS на iOS 6.

<!DOCTYPE html>
<html>
    <head>
        <title>Animation Playground</title>
        <style>
            @-webkit-keyframes sample {
                0% { -webkit-transform: translate3d(0px, 0px, 0px); opacity: 1; }
                10% { -webkit-transform: translate3d(0px, 0px, 0px); opacity: 0; }
                20% { -webkit-transform: translate3d(10px, 0px, 0px); opacity: 1; }
                40% { -webkit-transform: translate3d(10px, 10px, 0px); opacity: 0; }
                50% { -webkit-transform: translate3d(10px, 20px, 0px); opacity: 1; }
                80% { -webkit-transform: translate3d(20px, 20px, 0px); opacity: 0; }
                100% { -webkit-transform: translate3d(0px, 0px, 0px); opacity: 1; }
            }
        </style>
        <script type="text/javascript">
            function fib(node, a, b) {
                node.innerHTML = a;
                setTimeout(function() {
                    fib(node, a + b, b);
                }, 0);
            }

            function animate(node) {
                node.style.webkitAnimation = 'sample 5s infinite';
            }

            function createNode(row, column) {
                var node = document.createElement('div');
                node.style.width = '7px';
                node.style.height = '7px';
                node.style.position = 'absolute';
                node.style.top = 30 + (row * 9) + 'px';
                node.style.left = (column * 9) + 'px';
                node.style.background = 'green';
                return node;
            }

            function run() {
                for (var row = 0; row < 20; ++row) {
                    for (var column = 0; column < 20; ++column) {
                        var node = createNode(row, column);
                        document.body.appendChild(node);
                        animate(node);
                    }
                }

                var output = document.getElementById('output');
                fib(output, 0, 1);
            }
        </script>
    </head>
    <body onload="run()">
        <div id="output" style="font-size: 40px; position: absolute; left: 220px;"></div>
    </body>
</html>

Ответ 4

Попробуйте заменить все экземпляры -webkit-transform: translate3d(0,0,0);

-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);

Это сработало для меня

Ответ 5

Преобразования CSS действительно намного медленнее в iOS 6, по крайней мере в моем приложении на iPhone 4.

Я установил basic translate() в element вместо translate3d(), и производительность осталась прежней, поэтому я думаю, что даже translate3d() больше не запускает ускорение GPU. Это звучит как ошибка.

В качестве обходного пути я попытался установить другие свойства CSS (такие как rotate3d(), scale3d(), перспектива,...) на элемент, но ни один из них, похоже, не вызывает аппаратное ускорение.

Ответ 6

Попробуйте заменить все экземпляры -webkit-transform: translate3d(0,0,0); на -webkit-perspective: 1000; -webkit-backface-visibility: hidden;. Это сработало для меня. Похоже, что -webkit-transform: translate3d(0,0,0); больше не вызывает аппаратное ускорение.

Ответ 7

Могут ли те, кто сообщает, что -webkit-transform: translate3d (0,0,0); медленнее в iOS 6, укажите URL-адрес некоторого образца контента, который показывает это.

Ответ 8

Просто, чтобы сообщить, что -webkit-transform-origin ранее был аппаратным ускорением, если он используется вместе с аппаратными ускоренными преобразованиями, такими как translateZ (0), но это уже не так.