Flash of unstyled content (FOUC) in Firefox bei Verwendung von 'Autofokus' im Eingabefeld

9

Eigentlich ist das eher eine Fehlerbeschreibung als eine Frage.

Ich habe in Firefox auf einer sehr einfachen Anmeldeseite Flash of unstyled content (FOUC) gesehen. Es werden keine Bilder verwendet. Kein schweres CSS. Alles Javascript am Ende des Codes, direkt vor dem schließenden Body-Tag. Aber wenn die Seite geladen wird, zeigt Firefox eine völlig unausgegorene Seite für ungefähr 100 ms an und dann wird das CSS wirksam. Dies geschieht jedes Mal, ohne Ausnahme.

Zufällig fand ich eine Art von Hack, um das zu lösen: Fügen Sie einfach ein <script> -Element zum <head> hinzu, fügen Sie einen JavaScript-Code ein, den Sie mögen, oder sogar einen einfachen Kommentar und - bam! - Problem gelöst. So:

%Vor%

Der eigentliche Grund für diesen FOUC scheint die Verwendung des Autofokus-Attributs mit einem der Formularfelder zu sein. Das Entfernen des "Autofokus" löst das Problem also ebenfalls.

Ist das nicht seltsam? Kennt jemand eine bessere Lösung als meine?

    
Christian 29.04.2017, 22:30
quelle

1 Antwort

8

Ich kann dieses Verhalten in Firefox v.53 bestätigen, durch Eliminierung habe ich es bei einer Texteingabe auch auf das 'Autofokus' Attribut aufgespürt.

Sie können den FOUC entfernen, indem Sie den Fokus stattdessen auf Javascript setzen, etwa wie folgt:

%Vor%

Oder mit jQuery:

%Vor%     
Nick Bergquist 04.05.2017 22:59
quelle

Tags und Links