Performa CSS relatif terhadap translateZ (0)


96

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);
}

6
dapatkah Anda menautkan ke artikel blog tersebut?
Jürgen Paul

@PineappleUndertheSea yang satu ini: blog.teamtreehouse.com/… mengirim saya ke sini.

Btw, -o-transform: translateZ(0)tidak pernah menjadi apa-apa. caniuse.com/#search=translate3d
Volker E.

@Ahmed Nuaman ya itu bukan hanya tipuan. Tetapi secara resmi digunakan di beberapa aplikasi. Tetapi jika Anda menggunakan perangkat (kelas bawah) tanpa GPU ... Saya tidak yakin bagaimana kinerjanya. Tetapi karena jika apa yang dapat dilakukan prosesor (Grafik 2D) didelegasikan ke GPU hanya karena ada perintah 3D meskipun tidak memiliki dampak akhir. Dan 3D menggunakan banyak inti di dalamnya dan bekerja lebih cepat. Inilah yang masuk akal di sini. Perlu penyelidikan lebih lanjut ...
TooGeeky

Jawaban:


102

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.


28

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.


3
Saya mengalami masalah seperti gambar yang terjepit dan animasi yang sangat salah menggunakan max-height di Safari 5 dan 6. Ketika saya menonaktifkan akselerasi GPU (translateZ (0)), semuanya berfungsi sebagaimana mestinya, tetapi animasinya tidak cukup mulus. Saya mengubah translateZ (0) menjadi rotateZ (360deg), dan tiba-tiba animasinya mulus dan perangkat kerasnya dipercepat dan tidak ada masalah lagi.
jakub_jo

14

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/


7

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.


5

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;


1
Apakah maksud Anda "gunakan transformasi 3d" daripada "gunakan transisi 3d"?
Isius
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.