많은 블로그에서 transform: translateZ(0)애니메이션과 전환 속도를 높이는 데 사용하여 요소가 3D라고 생각하기 위해 GPU를 '속임수'하는 성능 향상을 표현했습니다 . 이 변환을 다음과 같은 방식으로 사용하는 것과 관련이 있는지 궁금합니다.
* {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}-o-transform: translateZ(0)는 결코 일이 아닙니다. caniuse.com/#search=translate3d
답변:
CSS 변환 은 사양에 설명 된대로 새로운 스택 컨텍스트 및 포함 블록을 만듭니다 . 일반 영어에서 이것은 변형이 적용된 고정 위치 요소가 절대 위치 요소처럼 작동하고 z-index값이 엉망이 될 가능성이 있음을 의미합니다.
당신이 한 번 봐 걸릴 경우 이 데모를 , 당신은 내가 무슨 뜻인지 확인할 수 있습니다. 두 번째 div에는 변형이 적용되어 새로운 스택 컨텍스트가 생성되고 유사 요소가 아래가 아닌 상단에 스택됩니다.
그래서 기본적으로 그렇게하지 마십시오. 최적화가 필요한 경우에만 3D 변환을 적용하십시오. -webkit-font-smoothing: antialiased;이러한 문제를 일으키지 않고 3D 가속을 활용하는 또 다른 방법이지만 Safari에서만 작동합니다.
암시를 원한다면 일부 시나리오에서 하드웨어 가속을 사용하면 Chrome 성능이 끔찍 합니다. 이상하게도 "트릭"을 -webkit-transform: rotateZ(360deg);잘 작동 하도록 변경 했습니다.
나는 우리가 그 이유를 알아 낸 적이 없다고 믿습니다.
브라우저가 하드웨어 가속을 사용하여 장치의 그래픽 처리 장치 (GPU)에 액세스하여 픽셀을 날리게합니다. 반면에 웹 응용 프로그램은 브라우저 컨텍스트에서 실행되므로 소프트웨어가 렌더링의 대부분 (전부는 아니지만)을 수행 할 수 있으므로 전환 성능이 떨어집니다. 그러나 웹이 따라 잡고 있으며 대부분의 브라우저 공급 업체는 이제 특정 CSS 규칙을 통해 그래픽 하드웨어 가속을 제공합니다.
를 사용 -webkit-transform: translate3d(0,0,0);하면 CSS 전환을 위해 GPU가 작동하여 더 매끄럽게 (높은 FPS)됩니다.
참고 : translate3d(0,0,0) 보는 것과 관련하여 아무 작업도하지 않습니다. x, y 및 z 축에서 개체를 0px만큼 이동합니다. 하드웨어 가속을 강제하는 기술 일뿐입니다.
좋은 읽기 : http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/
나는 -webkit-transform: translate3d(0, 0, 0);새로운 position: -webkit-sticky;재산을 망칠 것이라는 사실을 증명할 수 있습니다 . 작업중인 왼쪽 서랍 탐색 패턴을 사용하면 transform 속성으로 원하는 하드웨어 가속이 상단 탐색 모음의 고정 된 위치를 엉망으로 만들었습니다. 나는 변형을 끄고 포지셔닝이 잘 작동했습니다.
운 좋게도 -webkit-font-smoothing: antialiasedhtml 요소를 사용 했기 때문에 이미 하드웨어 가속 기능이있는 것 같습니다 . iOS7과 Android에서이 동작을 테스트하고있었습니다.
모바일 장치에서 모든 것을 GPU로 전송하면 메모리 과부하가 발생하고 애플리케이션이 중단됩니다. Cordova의 iPad 앱에서 이것을 만났습니다. 필요한 항목을 특별히 이동하는 div 인 GPU에만 보내는 것이 가장 좋습니다.
더 나은 방법은 3d 전환 변환을 사용하여 left : 50px가 아닌 translateX (50px)와 같은 애니메이션을 수행하는 것입니다.