iOS safari, video ve ölçek ile yavaş oluşturma sorunları

Question

iOS5 içinde, div boyutlarını ölçeklendirmek istiyorum, böylece boyutu görünüm portuyla orantılı. Bu div öğesinin bir video öğesi ve yakınlaştırma düzeyi çok yüksek olduğunda, görüntülenme çok yavaş olur.

ölçekleme böyle yapılır: • iOS cihazda Sonra

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

To reproduce click here. basın Show düğmesine basın. Oluşturmanın düzgün olmadığına dikkat edin.

The complete jsfiddle demo

Birkaç açıklamalar: initial-scale1.0 ayarlanırsa

1. hatanın yalnızca iOS cihaza (iPad/iPhone) fakat masaüstünde üzerinde çoğalır
2. , hata etmiyor 't
3. Görüntü öğesi kaldırılırsa, hata oluşmaz
4. Hata, iOS6 üzerinde yeniden oluşturur
5. Bu css kural kümesini div ve video { transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); }'a ekleyerek hw hızlandırmayı tetiklemeye çalıştım. Ama ben resmi kaldırmak ve sarı bir arka plan ile değiştirmek denedi ama bu özel vakanın ayrıntıları dalmadan önce

Answer 1

yardım etmedi

yardım etmedi, belki istersiniz aşağıdaki gibi yerine ölçek() ait

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

Answer 2

Sen scale3d kullanarak deneyebilirsiniz(): iOS'ta donanım hızlandırmasını tetikleyebilir aşağıdaki rulesets eklemeyi deneyin

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

Ayrıca, kodunuza birkaç kez ince ayar yapın, kurulumu tıklama işleyicilerinin dışına taşıyın ve tarayıcıyı destekliyorsa 'tıklama' yerine 'dokun' seçeneğini kullanın.

Sadece iPad simülatörüne erişebiliyorum, ancak yukarıdaki değişiklik performansı artırıyor gibi görünüyor, iOS webkit'te performans sorunlarına neden olduğu bildirilen 1024x768'in üzerindeyken kullandığınız test görüntüsüne de bakıyorum, bkz. makale (2/3 yol aşağı - repaints önleme bölümü): http://joehewitt.com/2011/10/05/fast-animation-with-ios-webkit