<details> feature detect causes a forced layout of the page

Aperta
#659 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
45/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
javascript
Ambito
frontend, performance

Direzione di ricerca

Inizia da src/assets/js/protocol/protocol-supports.js intorno alla riga 70, quindi riproduci l'avviso nella pagina del pattern details in Firefox Nightly con Dev Tools aperti. Verifica se la chiamata a Mzp.Supports.details() attiva il layout forzato prima che il caricamento della pagina sia completato. Il lavoro è completato quando il rilevamento della funzionalità non causa più il layout prematuro segnalato, oppure quando la sua invocazione viene posticipata in modo sicuro se necessario.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Bug :beetle:

Description

Calling Mzp.Supports.details() can cause a forced layout of the page in some scenarios. Firefox Nightly gives the following warning when this happens:

Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content.
Steps to reproduce
  1. Visit https://protocol.mozilla.org/patterns/molecules/details.html
  2. Open Dev Tools and inspect the warning message.

The warning links to this line: https://github.com/mozilla/protocol/blob/main/src/assets/js/protocol/protocol-supports.js#L70

Expected result

Is it possible to write a feature detect that doesn't cause the browser to do a forced layout? If not, we should make sure it gets called after the DOMContentLoaded event?

Actual result

The browser is forced to do a layout before it has fully loaded, which probasbly means it then has to do a second layout once finished.

Environment

Firefox Nightly

Lingua principale
SCSS
Stelle
298
Fork
83
Merge medio
8g 2h
PR unite (30g)
5

Guida per i contributori

Nessuna guida per i contributori indicizzata per questo repository

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di mozilla/protocol

Tutte le issue di mozilla/protocol

Issue simili

Altre issue su Web Dev

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.