-webkit-transform : iPad에서 뭉툭한 렌더링 번역하기

Question

번역/translate3d는 GPU를 사용하지만 어떤 이유로 인해 큰 그래픽이 iPad의 블록/덩어리로 렌더링됩니다. 번역을 사용할 때 이미지의 최대 너비/높이를 명시하는 데 어려움을 겪고 있습니다.

변환 속성에서 CSS 전환을 사용하고 싶지만이 문제로 인해 전환 할 수 없습니다. 'top'속성의 CSS 전환도 jQuery.animate()와 같은 것을 사용하는 것보다 느리게 수행됩니다.

이것에 대한 조언이 필요하십니까?

Answer 1

나는 정확히 같은 문제가 있고,이 작은 CSS 보석과 성공을 많이했다 :

-webkit-backface-visibility: hidden; 

내가 발견은 "뭉툭한"렌더링을 해결 애니메이션을 한 모든 요소에이 추가. 어떤 경우에는 나는 또한 그것을 자식 요소에 추가해야했다. 큰 래퍼 div가 있고 translateX를 사용하여 x 위치를 조정했습니다. 래퍼 div에 CSS의 마법 라인을 추가하고 해당 div의 직접적인 하위 항목 (내 콘텐츠 영역)을 추가했습니다. 그걸 가지고 놀아 라. 그러면 그걸 잘 정리해 낼거야!