Performa CSS relatif terhadap translateZ (0)

Sejumlah blog telah mengungkapkan peningkatan kinerja dalam 'mengelabui' GPU untuk berpikir bahwa sebuah elemen adalah 3D dengan menggunakan transform: translateZ(0)untuk mempercepat animasi dan transisi. Saya bertanya-tanya apakah ada implikasi untuk menggunakan transformasi ini dengan cara berikut:

* {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

Transformasi CSS membuat konteks tumpukan baru dan blok berisi, seperti yang dijelaskan dalam spesifikasi. Dalam bahasa Inggris sederhana, ini berarti bahwa elemen posisi tetap dengan transformasi yang diterapkan padanya akan bertindak lebih seperti elemen yang diposisikan secara absolut, dan z-indexnilai cenderung akan kacau.

Jika Anda melihat demo ini , Anda akan mengerti maksud saya. Div kedua memiliki transformasi yang diterapkan padanya, artinya ia membuat konteks penumpukan baru, dan elemen pseudo ditumpuk di atas, bukan di bawah.

Jadi pada dasarnya, jangan lakukan itu. Terapkan transformasi 3D hanya jika Anda membutuhkan pengoptimalan. -webkit-font-smoothing: antialiased;adalah cara lain untuk memanfaatkan akselerasi 3D tanpa menimbulkan masalah ini, tetapi ini hanya berfungsi di Safari.

Jika Anda menginginkan implikasinya, dalam beberapa skenario, kinerja Google Chrome sangat buruk dengan akselerasi perangkat keras diaktifkan . Anehnya, mengubah "trik" menjadi -webkit-transform: rotateZ(360deg);bekerja dengan baik.

Saya tidak percaya kami pernah tahu mengapa.

Ini memaksa browser untuk menggunakan akselerasi perangkat keras untuk mengakses unit pemrosesan grafis (GPU) perangkat untuk membuat piksel terbang. Aplikasi web, di sisi lain, berjalan dalam konteks browser, yang memungkinkan perangkat lunak melakukan sebagian besar (jika tidak semua) rendering, menghasilkan lebih sedikit tenaga kuda untuk transisi. Tetapi Web telah mengejar ketertinggalan, dan sebagian besar vendor browser sekarang menyediakan akselerasi hardware grafis melalui aturan CSS tertentu.

Menggunakan -webkit-transform: translate3d(0,0,0);akan menendang GPU untuk beraksi untuk transisi CSS, membuatnya lebih mulus (FPS lebih tinggi).

Catatan: translate3d(0,0,0) tidak melakukan apa pun dalam hal apa yang Anda lihat. Ini memindahkan objek sebesar 0px dalam sumbu x, y dan z. Ini hanya teknik untuk memaksa akselerasi perangkat keras.

Bacaan bagus di sini: http://www.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/

Saya dapat membuktikan fakta bahwa -webkit-transform: translate3d(0, 0, 0);akan mengacaukan position: -webkit-sticky;properti baru . Dengan pola navigasi laci kiri yang sedang saya kerjakan, akselerasi perangkat keras yang saya inginkan dengan properti transformasi mengacaukan pemosisian tetap bilah navigasi atas saya. Saya mematikan transformasi dan pemosisian berfungsi dengan baik.

Untungnya, saya tampaknya sudah mengaktifkan akselerasi perangkat keras, karena saya -webkit-font-smoothing: antialiasedmenggunakan elemen html. Saya menguji perilaku ini di iOS7 dan Android.

Pada perangkat seluler, mengirim semuanya ke GPU akan menyebabkan kelebihan memori dan merusak aplikasi. Saya menemukan ini di aplikasi iPad di Cordova. Sebaiknya hanya mengirim item yang diperlukan ke GPU, div yang secara khusus Anda pindahkan.

Lebih baik lagi, gunakan transformasi transisi 3d untuk melakukan animasi seperti translateX (50px) dibandingkan left: 50px;