La magia sottostante di -webkit-backface-visibility

Question

Mi piacerebbe sapere perché webkit-backface-visibility è come quell'aspirina multiuso che risolve o peggiora tutti i tipi di problemi eterogenei, in gran parte legati a artefatti e sfarfallio.

Ho letto e capito che cosa è veramente backface-visibility per: Controlla se gli oggetti ruotati 3D sono visibili quando non sono rivolti verso lo schermo. C'è una bella, demo straighforward here

Ma io sono curioso di sapere perchè, ogni volta che ho strane imperfezioni nel mondo CSS, totalmente estranei al 3D rotazioni e le loro facce posteriori nascoste, applicando backface-visibility allo strato problematica o uno dei suoi gli antenati di solito aiutano o peggiorano le cose, ma raramente non fa nulla. Sto parlando di cose come

• animazioni tremolante
• strati fissi problemi Z-Index
• display: none <> sfarfallio visibile e manufatti
• scorrimento sfarfallio

interessante e sempre nella mia umile esperienza, backface-visibility:hidden tende a risolvere i problemi relativi al posizionamento fisso, e backface-visibility:visible è "il migliore" per il tremolio. Interessante anche, in Chrome e Safari gli effetti collaterali sono diversi, ma ragazzi ci sono!

Sto lavorando a un creatore di Visual HTML, quindi le situazioni in cui sono presenti sfarfalli/artefatti sono piuttosto complesse (ad esempio un'animazione su più livelli, una barra di scorrimento dietro elementi fissi, assoluta su fissa con z-index .. ..)

Chiunque può illuminarmi?

Answer 1

io non sono sicuro di che tipo di magia che si sta parlando, ma ci sono alcuni casi in cui CSSbackface-visibility proprietà può aiutare a promuovere DOM elemento ad un livello in modo che il browser possa approfittare del GPU durante il rendering di quell'elemento.

NOTA: solo il valore hidden verrà promosso a un livello non visible.

Inoltre, ci sono casi in cui questa proprietà può correggere i bordi frastagliati attorno agli elementi. Tutto grazie al rendering GPU.

Ci sono pochi altri CSS proprietà che fanno la stessa cosa come translateZ(0) o translate3d(0,0,0). Questi sono tutti hack e saranno rimpiazzati con la nuova proprietà CSS will-change.

Se si sta facendo le animazioni con i CSS, l'opzione migliore in termini di prestazioni è quello di cambiare solo questi CSS proprietà: transforms e opacity. Ma questo è l'argomento del cambiamento e i browser cambiano continuamente, quindi questo potrebbe cambiare anche in futuro. L'obiettivo è rendere ogni proprietà CSS il più agevole possibile (idealmente a 60 FPS) durante l'animazione.So che il team di Chrome sta lavorando molto duramente su questo, ma non sono sicuro di altri fornitori.