GPU Accelerazione della animati e contenuti offuscata

Question

Domanda: Perché registrare il mio CPU ~ 30% quando sfocatura viene applicato contro ~ 6% quando nessun sfocatura viene applicata a un oggetto animato?

Dettagli:

Ho una serie di elementi generati casualmente su una pagina che hanno un'animazione CSS assegnato (in un file CSS) e valori generati in modo casuale per la larghezza, l'altezza e, soprattutto, sfocatura, applicato in linea.

stili file CSS appare come:

animation-name: rise; 
animation-fill-mode: forwards; 
animation-timing-function: linear; 
animation-iteration-count: 1; 
-webkit-backface-visibility: hidden; 
-webkit-perspective: 1000; 
-webkit-transform: translate3d(0,0,0); 

transform: translateZ(0); 

larghezza, l'altezza e la sfocatura vengono applicate in linea tramite l'attributo style.

<div class="foo" style="width:99px;height:99px; 
         filter:blur(2px); 
         -webkit-filter:blur(2px) opacity(0.918866247870028); 
         -moz-filter:blur(2px) opacity(0.918866247870028); 
         -o-filter:blur(2px) opacity(0.918866247870028); 
         -ms-filter:blur(2px) opacity(0.918866247870028);"></div> 

Con la sfocatura attivata l'utilizzo della CPU è ~ 30%. Quando disattivo la sfocatura, l'utilizzo della CPU scende al ~ 6%.

Cosa sta succedendo qui? Solo Chrome è in grado di accelerare GPU quando non viene applicata alcuna sfocatura? Se è così, perché?

Update 1:

L'animazione rise si presenta come segue:

@keyframes rise { 
    0% { 
     transform: translateY(0px); 
    } 
    100% { 
     transform: translateY(-1000px); 
    } 
} 

Answer 1

Non sfocatura in stili inline. Metti la tua sfocatura nel file di stile.

Answer 2

Non penso che la sfocatura stia effettivamente causando i tuoi problemi, sembra solo renderla più evidente di prima. Il problema è che lo transform: translateY dell'animazione sta sovrascrivendo lo transform: translateZ(0) che stai utilizzando per forzare l'accelerazione GPU.

Si tratta di una linea temporale di registrazione per il codice che si sta eseguendo in questo momento, notare come non ci sia tutta questa attività sui principali e raster discussioni:

Ora confronta ad una registrazione in cui ho applicata will-change: transform alla .foo:

Nessuna attività sul principale e raster di sorta.

Ci sono due passaggi per applicare questa correzione:

1. Applicare will-change: transform a .foo. Ciò consentirà al browser di sapere che intendi modificare tale proprietà e farlo visualizzare all'elemento sulla GPU per renderlo conto.

2. Nessuna versione di Edge e supporto IE will-change al momento. Pertanto utilizzeremo lo transform: translate3d(0, -1000px, 0); nell'animazione per forzare l'accelerazione GPU. Nota che si tratta di un trucco, quindi rileveremo il supporto per will-change e utilizzeremo lo transform: translateY nei browser che lo supportano.

codice finale:

@keyframes rise { 
    0% { 
     transform: translate3d(0, 0, 0); 
    } 
    100% { 
     transform: translate3d(0, 1000px, 0); 
    } 
} 

@supports (will-change: transform) { 
    @keyframes rise { 
     0% { 
      transform: translateY(0px); 
     } 
     100% { 
      transform: translateY(1000px); 
    } 
    } 
} 

div { 
    width: 100px; 
    height: 100px; 
    background: #f00; 
    animation: rise forwards 2s linear infinite; 
    will-change: transform; 
} 

Vedi qui per una versione funzionante: http://jsbin.com/mosuvikoto/edit?html,css,output