Soluzione alternativa per lo scorrimento lento con scrolling continuo in firefox

Question

Sono uno sviluppatore per un'applicazione web. In questa applicazione esiste un certo scenario in cui sono presenti più posizioni: elementi fissi e tele e un overflow: elemento di scorrimento. In questo scenario, lo scorrimento è molto lento su firefox quando lo scorrimento regolare è abilitato.

Dal punto di vista dell'utente, la soluzione è semplicemente disabilitare lo scorrimento uniforme. Tuttavia, come sviluppatore non posso garantire che l'utente abbia fatto questo.

C'è un punto in cui posso dire a firefox di non utilizzare lo scorrimento fluido per il mio sito web da javascript (o html)? O c'è qualche altra soluzione nota per questo?

Answer 1

Capisco che la tua domanda in pratica è come disabilitare lo scorrimento fluido. comunque ti risponderò un po 'diversamente per farlo funzionare.

Perché diverso?

Anche se è possibile rilevare lo scorrimento uniforme degli utenti, non è possibile forzare l'utente a disabilitarlo. In altre parole, stai cercando di coprire il problema invece di risolverlo. quindi cerchiamo di risolverlo!

Intro: pixel-per-schermo gasdotto

Su ogni fotogramma il browser fa le seguenti operazioni per il rendering della pagina sullo schermo.

• JavaScript. In genere JavaScript viene utilizzato per gestire il lavoro che si tradurrà in modifiche visive, che si tratti della funzione animate di jQuery, dell'ordinamento di un set di dati o dell'aggiunta di elementi DOM alla pagina. Non deve essere JavaScript che innesca una modifica visiva, tuttavia: anche le animazioni CSS, le transizioni e l'API delle animazioni Web sono comunemente utilizzate.

• Calcoli di stile. Questo è il processo per capire a quali regole CSS si applicano gli elementi basati sui selettori di corrispondenza, ad es. .headline o .nav> .nav__item. Da lì, una volta note le regole, vengono applicate e vengono calcolati gli stili finali per ciascun elemento.

• Layout. Una volta che il browser sa quali regole si applicano a un elemento, può iniziare a calcolare quanto spazio occupa e dove si trova sullo schermo. Il modello di layout del Web indica che un elemento può influenzare gli altri, ad es.la larghezza dell'elemento in genere influisce sulle larghezze dei bambini e così via su e giù dall'albero, quindi il processo può essere abbastanza complicato per il browser.

• Vernice. La pittura è il processo di riempimento in pixel. Si tratta di estrarre testo, colori, immagini, bordi e ombre, essenzialmente ogni parte visiva degli elementi. Il disegno viene tipicamente eseguito su più superfici, spesso chiamate livelli.

• Compositing. Dato che le parti della pagina sono state disegnate in più livelli, è necessario disegnarle sullo schermo nell'ordine corretto in modo che la pagina venga visualizzata correttamente. Questo è particolarmente importante per gli elementi che si sovrappongono a un altro, poiché un errore potrebbe comportare un elemento che appare in modo errato sopra l'altro.

particolari e fonte: https://developers.google.com/web/fundamentals/performance/rendering/?hl=en

Fase 1:

primo passo è quello di rimuovere rendering proprietà css costosi. Potrebbe non essere possibile rimuovere molto, tuttavia è possibile sostituire rgba(255,255,255,1); con #fff che rimuove il livello alfa.

controllo questo per maggiori dettagli: https://csstriggers.com/ alcune proprietà non hanno bisogno di fare un layout o un paint e ci sono meno pesante rispetto ad altri.

Fase 2:

Controllare forced synchronous layout trigger. Questi si verificano quando si forza il browser a fare un layout mentre è nel passaggio javascript, quindi si torna a javascript, invece di camminare senza problemi lungo la pipeline su ciascun fotogramma. per fare ciò, evitare di ottenere gli attributi del layout e impostarli direttamente successivamente in un ciclo, ad esempio.

Ecco un elenco di ciò che provoca il layout di sincronizzazione: https://gist.github.com/paulirish/5d52fb081b3570c81e3a

saperne di più: https://developers.google.com/web/tools/chrome-devtools/profile/rendering-tools/forced-synchronous-layouts?hl=en

Fase 3:

componenti mossa sulla pagina che hanno bisogno di essere ridipinta regolarmente in nuovi strati.

Il browser deve ridisegnarsi ogni volta che si scorre o si sta riproducendo un'animazione. al fine di evitare una pagina ridipingere pieno e ridisegnare solo la parte che sta cambiando, spostare quella parte (ex parallasse, navigazione, animazione) ad un nuovo livello sul browser (si pensi a questo proposito, come i livelli di Photoshop)

a farlo usa la proprietà will-change css per dire al browser di spostarlo su un nuovo livello e usa transform: translateZ(0); se vuoi forzare il broswer a spostarlo.

Answer 2

Hai provato aggiungendo

backface-visibility: hidden; 

a viene confermato gli elementi di posizione?

Vorrei piuttosto risolvere l'origine del problema. Spesso c'è un piccolo dettaglio che crea un enorme collo di bottiglia e che è facile da risolvere con il cambio di una riga di codice o qualcosa del genere. Nota che molto probabilmente non avrai bisogno di ridurre affatto il "bell'aspetto" dell'app; si tratta solo di evitare i dettagli piccoli ma devastanti per le prestazioni del motore di layout del browser.

Farò un'ipotesi e dirò che qualcosa sulla tua app web sta provocando rimborsi molto grandi e/o frequenti riflessi. Controlla cose come l'uso di offsetTop e position: fixed. Anche usare requestAnimationFrame invece di aggiornare per ogni evento di scorrimento è qualcosa che vale la pena guardare. Here's a good guide on both finding and fixing scrolling performance problems.

Answer 3

Utilizzare l'elemento di controllo per cercare di ottenere una maniglia sulla causa specifica. Inoltre, se non hai installato FireBug, installalo e usalo invece dell'elemento inspect di default. Questo ti darà più dettagli sul codice e ti permetterà di scorrere lo script per trovare il problema. Esistono anche plugin per FireBug per vari framework, che possono aiutare la diagnostica se si utilizza uno di questi framework.

Possiamo fare supposizioni sulla causa o trovare soluzioni per fucili a pompa; ma solo tu puoi diagnosticare il tuo codice per trovare le specifiche.