Safari iOS, powolne renderowanie z wideo i skalą

Question

W iOS5, chciałbym przeskalować div, więc jego rozmiar jest proporcjonalny do portu widoku. Gdy ten element div zawiera element video, a poziom powiększenia jest zbyt wysoki, renderowanie jest bardzo wolne bardzo wolne.

Skalowanie odbywa się to tak:

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

To reproduce click here. wtedy na urządzeniu iOS, naciśnij przycisk Show. Zauważ, że renderowanie nie jest płynne.

The complete jsfiddle demo

Kilka uwag:

1. Błąd odtwarza tylko na urządzenia z systemem iOS (iPad/iPhone), ale nie na pulpicie
2. Jeśli initial-scale jest ustawiony na 1.0, błąd nie robi Występuje
3. Jeśli element wideo zostanie usunięty, błąd nie pojawi się
4. Błąd jest odtwarzany pod numerem iOS6
5. Próbowałem uruchomić przyspieszenie hw, dodając ten zestaw reguł css do div i wideo { transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); }. Ale to nie pomogło
6. Próbowałem zdjąć obraz i zastąpić go z żółtym tle, ale to nie pomogło

Answer 1

przed nurkowaniem do szczegółów tego konkretnego przypadku, warto spróbuj dodanie następujących zestawów reguł, które powodują przyspieszenie sprzętowe na iOS:

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

Answer 2

można spróbować użyć scale3d() zamiast skali(), jak w poniższym przykładzie:

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

Dokonano również kilku poprawek w kodzie, przenosząc ustawienia poza modułami obsługi kliknięć i używając przycisku "touchend" zamiast "kliknij", jeśli przeglądarka obsługuje dotyk.

Mam tylko dostęp do symulatora iPada, ale powyższa zmiana wydaje się poprawiać wydajność, chciałbym też spojrzeć na obraz testowy, którego używasz, ponieważ jest ponad 1024x768, który jest zgłaszany jako powodujący problemy z wydajnością na webkicie iOS, zobacz artykuł tutaj (2/3 drogi w dół - sekcja o unikaniu odświeżania): http://joehewitt.com/2011/10/05/fast-animation-with-ios-webkit