iOS6 UIwebView CSS3D-Transformationen sind nicht HW-beschleunigt

Habe ich Probleme mit schlechten Blättern Leistung in iOS6 UIWebView-Komponente..In iOS5 scrollen war wirklich flüssig, obwohl. So suchte ich im web etwas gefunden und dieses (Teil der iOS6 beta changelog).

WebKit nicht mehr immer schafft, hardware-beschleunigte Ebenen für die Elemente, die mit dem -webkit-transform: preserve-3d-option. Autoren sollten aufhören, mit dieser option als einen Weg, um die hardware-Beschleunigung.

Dass könnte der Grund sein, da der html-Seite meine app zeigt verwendet viele der css3-Transformationen..
Bitte hat jemand eine Lösung oder Tipps, wie man Kraft Webansicht wechseln Sie zurück zu einer beschleunigten rendering-Modell?

InformationsquelleAutor simekadam | 2012-09-21

5

UIWebView immer noch hardware-Beschleunigung, wenn Sie eine 3D-Transformation (z.B. -webkit-transform: translateZ(0)). Es einfach nicht mehr funktioniert, wenn Sie nur Verwendung -webkit-transform-style: preserve-3d.

Wenn Sie ein Beispiel, das 3D-Transformationen, aber immer langsamer mit iOS 6, melden Sie es in Apples Bug-Reporter.
- Danke.. Eigentlich ist es nicht mein eigener code, sondern 3rd-party-Bibliothek.. ich werde schauen, wie sein code funktioniert und Alternativ Kontaktieren oder Apple..
- Und wo bitte kann ich feststellen, ob oder nicht, werden bestimmte CSS-Eigenschaften beschleunigt?
InformationsquelleAutor user1690215
8

Neben der bereits erwähnten änderung der CSS-Eigenschaften, die sind(oder nicht) Auslösung-hardware-Beschleunigung habe ich bemerkt, eine weitere änderung in IOS 6, die nicht bestehen bleiben, da Sie sehr stark auf iOS5 (oder zumindest habe ich nicht wirklich bemerkt vor):
Überschneidungen zwischen hardware-beschleunigten Elemente und nicht-Elemente beschleunigt werden verlangsamen das rendering und die app EINE MENGE.

Wenn Sie irgendwelche überschneidungen zwischen beschleunigten und nicht beschleunigten Elemente, stellen Sie sicher, dass Sie hinzufügen hardware-Beschleunigung, um die anderen Elemente, auch wenn Sie nicht animiert wird oder so, weil Sie neu gerendert, als auch welche, die komplett unterdrücken, oder in einigen Fällen das zurücksetzen der Beschleunigung-Effekt.

Habe ich auch geschrieben, einen kurzen Artikel über diese, wenn Sie wollen, check it out:
http://indiegamr.com/ios6-html-hardware-acceleration-changes-and-how-to-fix-them/

InformationsquelleAutor olsn

Habe ich an einen einfachen Testfall reproduziert diesen bug in iOS6, und die läuft einwandfrei auf iOS5.1 (auf beiden iPhone 4 und 4S). Der iOS-Chrome-app ist ein guter Ort, um diesen test ausführen, da es bettet ein UIWebView. Ich habe ein video, das werde ich Anhängen sobald Sie lädt zwei iPhone 4 (der Obere läuft iOS 5.1, die andere mit iOS 6) mit diesem Beispiel-Skript in eine PhoneGap 2.0 UIWebView.

Gerade jetzt, es scheint wie diese Elemente SIND hardware-beschleunigte, aber dass es ein bug in apples low-level-pipeline, die tötet Leistung. Wir habe versucht eine Reihe von Problemumgehungen für die hardware-Beschleunigung, und es scheint sicher, dass alles, was ruft die GPU auf iOS5.1 bewirkt eine massive Abschwächung auf iOS6.

Ich würde gerne eine Lösung finden, da die app, die wir bauen, stützt sich ziemlich stark auf diese arbeiten ordnungsgemäß. Wenn jemand einen Fehler in diesem Beispiel, wäre das auch äußerst geschätzt.

EDIT: Der Fehler weiterhin besteht, auch wenn Sie ändern Sie die animate-Funktion wie folgt.

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

Dies scheint zu bestätigen, dass die Berufung auf die GPU Ursachen dieser Verlangsamung.

EDIT 2: Es gibt ein zusätzliches Beispiel zu Gast bei http://bvgam.es/apple/ die läuft problemlos auf iOS 5.1 und bekommt 1-2 FPS auf 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>

InformationsquelleAutor eplawless

2

Ersetzen Sie alle Instanzen von -webkit-transform: translate3d(0,0,0);

Mit

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

Er hat Arbeit für mich

InformationsquelleAutor Anand
1

CSS Transforms sind in der Tat viel langsamer als iOS 6, zumindest in meiner Anwendung auf dem iPhone 4.

Ich set basic translate (), um das element, anstatt translate3d(), und die Leistung ist gleich geblieben, so denke ich, dass auch translate3d() löst nicht mehr GPU-Beschleunigung. Das klingt wie ein bug.

Als workaround, ich habe versucht, eine andere CSS-Eigenschaften (wie rotate3d(), scale3d(), Perspektive, ...) auf element, aber keiner von Ihnen scheint zu trigger-hardware-Beschleunigung.

InformationsquelleAutor kuvik
0

Ersetzen Sie alle Instanzen von -webkit-transform: translate3d(0,0,0); mit -webkit-perspective: 1000; -webkit-backface-visibility: hidden;. Dieser arbeitete für mich. Es scheint, dass -webkit-transform: translate3d(0,0,0); nicht mehr startet hardware-Beschleunigung.

InformationsquelleAutor user1491646
0

Könnte, diese Berichterstattung, die -webkit-transform: translate3d(0,0,0); ist langsamer als iOS 6, bitte geben Sie eine URL, um einige Beispiel-Inhalte, zeigt dies.

InformationsquelleAutor user1690215
0

Nur damit einige wissen, dass -webkit-transform-origin war vorher hardware beschleunigt, wenn Sie zusammen mit hardware beschleunigte Transformationen, wie translateZ(0), aber es nicht mehr ist.

InformationsquelleAutor Ricardo Freitas

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.