iOS-Safari, langsame Rendering-Probleme mit Video und Skala

Question

In iOS5, würde Ich mag einen maßstab div so seine Größe auf die Sichtöffnung proportional ist. Wenn diese div ein video Element enthält und die Zoomstufe zu hoch ist, ist die Rendering sehr langsam.

ist die Skalierung wie dies geschehen:

var scaleFactor = window.innerWidth/$("#videoContainer").width(); 
    $("#videoContainer").css({ 
     '-webkit-transform': 'scale(' + scaleFactor * 0.9 + ')', 
     '-webkit-transform-origin': '0 0' 
    }); 

To reproduce click here. Dann auf Ihrem iOS Gerät, drücken Sie die Taste Show. Beachten Sie, dass das Rendering nicht glatt ist.

The complete jsfiddle demo

Einige Bemerkungen:

1. Der Fehler nur auf iOS-Gerät (iPad/iPhone), aber nicht auf dem Desktop wieder
2. Wenn die initial-scale-1.0 gesetzt ist, doesn der Bug 't auftreten
3. Wenn das Videoelement entfernt wird, tritt der Fehler nicht auf
4. Der Fehler reproduziert auf iOS6 div und Video { transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); }
5. Ich habe durch das Hinzufügen dieser CSS ruleset hw Beschleunigung auszulösen versucht. Aber es hat nicht geholfen
6. Ich habe versucht, das Bild zu entfernen und mit einem gelben Hintergrund zu ersetzen, aber es half nicht

Answer 1

Vor dem Tauchen in die Details dieses speziellen Fall, möchten Sie vielleicht versuchen Sie die folgenden Regelsätze hinzufügen, die die Hardware-Beschleunigung auf iOS auslösen:

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

Answer 2

Sie versuchen Scale3D mit könnte() anstelle von Skala(), wie in der folgenden:

http://jsfiddle.net/yhRNu/26/

hat auch ein paar kleine Änderungen an Ihren Code, um das Setup außerhalb des Klick-Handler zu bewegen und ‚touchend‘ anstelle von ‚klicken‘ verwenden, wenn Browser Touch unterstützt.

Ich habe nur Zugriff auf den iPad-Simulator, aber die obige Änderung scheint die Leistung zu verbessern, würde ich auch auf das Testbild, das Sie verwenden, wie es ist über 1024x768, die Leistungsprobleme auf iOS Webkit, siehe sehen soll Artikel hier (2/3 Weg nach unten - Abschnitt über das Vermeiden von Repaints): http://joehewitt.com/2011/10/05/fast-animation-with-ios-webkit