iOS safari, 비디오 및 스케일의 렌더링 문제가 느림

Question

iOS5에서 div의 크기가보기 포트에 비례하도록 축척하고 싶습니다. 이 div에 video 요소가 포함되어 있고 확대/축소 수준이 너무 높으면 렌더링은 매우 느림입니다.

스케일링은 다음과 같이 수행됩니다 : 당신의 iOS 장치에서 다음

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

To reproduce click here. 눌러 Show 버튼을 누릅니다. 렌더링이 매끄럽지 않습니다.

The complete jsfiddle demo

몇 가지 발언 다음 initial-scale이 1.0로 설정되어있는 경우

1. 버그는 아이폰 OS 디바이스 (아이 패드/아이폰)이 아닌 바탕 화면에 재현
2. , 버그 아무튼 발생하지 않습니다
3. 비디오 요소가 제거되면 버그가 발생하지 않습니다.
4. 버그가 iOS6에서 재생됩니다.
5. div 및 비디오 { transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); }에이 CSS 규칙 집합을 추가하여 hw 가속을 트리거하려고했습니다. 그러나 내가 이미지를 제거하고 노란색 배경으로 대체하려고 노력하지만이 특정 사건의 세부 사항에 다이빙하기 전에

Answer 1

도움이되지 않았다

도움이되지 않았다, 당신에게 할 수 있습니다 다음과 같이 대신 규모()의

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

Answer 2

당신은 scale3d를 사용하여 시도해 볼 수도 있습니다() : iOS에서 하드웨어 가속을 트리거 다음과 같은 규칙 세트를 추가하려고

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

클릭 핸들러 외부에서 설정을 이동하고 브라우저가 터치를 지원하면 '클릭'대신 'touchend'를 사용하여 코드를 약간 조정 해보십시오.

iPad 시뮬레이터에만 액세스 할 수 있지만 위의 변경으로 인해 성능이 향상되는 것 같습니다. iOS 웹킷에서 성능 문제를 일으키는 것으로보고 된 1024x768 이상이므로 사용하고있는 테스트 이미지를 살펴보아야합니다. 기사는 여기에서 (2/3 방법 아래로 - repaintts 피하는에 관한 섹션) : http://joehewitt.com/2011/10/05/fast-animation-with-ios-webkit