Come ottenere transizioni performanti senza sfocatura del testo in Webkit a causa dell'accelerazione hardware

Question

Ho un elemento posizionato in modo assoluto che sto transitando nel viewport. L'elemento contiene del testo al suo interno. Mia comprensione è come tale:

• È cattiva pratica di applicare le transizioni posizione di un elemento (cioè superiore, sinistro, inferiore, destro, margine, padding). In questo modo, il browser si rifletterà pesantemente mentre l'elemento si sposta sulla pagina.

• È buona prassi applicare le trasformazioni a un elemento in quanto il browser non subisce il reflusso in quanto la posizione del modello di casella rimane nella posizione originale.

• L'applicazione di una trasformazione a un elemento nel browser Webkit impone l'accelerazione hardware. (Oppure può essere forzato a farlo, cioè se trasformi: translateX non è quindi possibile utilizzare translate3d con asse z pari a 0).

• Il testo che viene accelerato dall'hardware non viene considerato come vettore. Ciò fa sì che il testo diventi sfocato.

Ho trovato l'articolo this discutendo di soluzioni alternative, ma non sono soddisfatto.

Sembra che sarebbe meglio passare l'elemento con le trasformazioni, ma, una volta che l'elemento ha raggiunto il suo stato di riposo, sostituire la trasformazione con left/top della stessa misura per rimuovere l'elemento dall'accelerazione hardware.

Sono sulla buona strada? C'è una soluzione più facile qui?

Come semplice esempio, controllare il testo quando si modifica la proprietà di modifica. È possibile vedere che il testo si offusca in previsione di una trasformazione che si verifica anche se non avviene alcuna trasformazione. Questa è la stessa cosa che lasciare una trasformazione sull'elemento anche dopo che ha finito di spostarsi/avere il testo accanto a un elemento che si sta muovendo. Sarebbe davvero bello dire a Chrome di mantenere il testo come un vettore, ma sospetto che tutti gli elementi genitore vengano promossi, motivo per cui il testo viene modificato.

$('button').click(function() { 
 
    $('.example').toggleClass('is-blurred'); 
 
});

.example { 
 
    font-size: 24px; 
 
} 
 
.example.is-blurred { 
 
    will-change: transform; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Toggle blur</button> 
 

 
<div class='example'> 
 
    I am some text 
 
</div>

Answer 1

Quando transizione CSS è finito, il browser non hanno bisogno di un sacco di risorse hardware per mantenere elemento al suo posto. Quindi non ti preoccupare.