Safari iOS, problemi di rendering lento con video e scala

Question

In iOS5, mi piacerebbe ridimensionare uno div quindi la sua dimensione è proporzionale alla porta di visualizzazione. Quando questo div contiene un elemento video e il livello di zoom è troppo alta, il rendering è molto lento .

La scala è fatto in questo modo:

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

To reproduce click here. Poi sul dispositivo iOS, premere il pulsante Show. Si noti che il rendering non è uniforme.

The complete jsfiddle demo

Qualche osservazione:

1. L'insetto si riproduce solo su dispositivi iOS (iPad/iPhone), ma non sul desktop
2. Se il initial-scale è impostato su 1.0, il bug doesn Si verifica
3. Se l'elemento video viene rimosso, il bug non si verifica
4. Il bug si riproduce su iOS6
5. Ho provato ad attivare l'accelerazione hw aggiungendo questo css ruleset a div e video { transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); }. Ma non ha aiutato
6. ho cercato di rimuovere l'immagine e per sostituirlo con uno sfondo giallo, ma non ha aiutato

Answer 1

Prima di addentrarci i dettagli di questo caso specifico, si potrebbe desiderare di provare ad aggiungere i seguenti insiemi di regole, che fanno scattare l'accelerazione hardware su iOS:

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

Answer 2

Si potrebbe provare a utilizzare scale3d() al posto di scala() come nell'esempio seguente:

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

hanno anche fatto un paio di modifiche al codice, spostando la messa a punto al di fuori dei gestori clic e utilizzando 'touchend' invece di 'click' se il browser supporta tocco.

Ho solo accesso al simulatore iPad ma il cambiamento sopra sembra migliorare le prestazioni, vorrei anche guardare l'immagine di prova che stai usando in quanto è più di 1024x768 che è segnalato per causare problemi di prestazioni su webkit iOS, vedere articolo qui (2/3 via discendente - sezione su come evitare i ritardi): http://joehewitt.com/2011/10/05/fast-animation-with-ios-webkit