Cassiopeia Menu stabilisieren

  • Wahrscheinlich der Font Awesome font von deinem Suchen Icon, was verzögert lädt und somit das Springen verursacht.

    Gibt nun 1mio Möglichkeiten das zu fixen...


    Danke bembelimen, ist tatsächlich das such Icon.
    "Gibt nun 1mio Möglichkeiten das zu fixen..." klingt gut :)


    Wie Könnte man es lösen, gibst du mir eine Möglichkeit ? (mit dem Icon) Das wäre nett.

  • Ich bin da auch nicht schlauer, aber sehe auf Seite 5, dass alle Icons das Problem haben. Also auch in der Anmeldemaske und der Rollstuhlfahrer, wenn man Seite einfach neu lädt. Flickern alle kurz bis das Icon dann da ist.


    Wenn ich den Webfont blockiere, sehe ich natürlich kein Icon, sondern stattdessen so ein Quadrat-Platzhalter für "unbekanntes Zeichen", aber dann flickert das nicht.


    Auf meiner Seite flickert das auch, die Icons im Anmeldemodul. Relativ blankes J4. Auf ungecachtem Firefox kann ich zusehen, wie die Container für die Felder größer werden, wenn das Icon dann kommt. Das könnte man vielleicht noch als netten Effekt bezeichnen? ;)


    Mein Verdacht geht in die Richtung: Durch JavaScript-Quatsch wird das Font-Awesome-Zeugs verzögert geladen. Das ist schick und modern ;) Wenigstens, dass der Nutzer nur noch durch JavaScript-Skills Möglichkeiten zum Eingreifen hat.


    Das geht auf obskuren Wegen: Die template.min.js wird mir als Initiator für das Laden der fontawesome.css angezeigt, was wiederum Initiator für den fontawesome-Webfont ist.


    Und wichtiger, diese ganze Laderoutine startet erst nach einem 'DOMContentLoaded', was bedeutet, erst, wenn der meiste Rest von der Seite bereits aufgebaut und geladen ist.


    Flickern ist also leider in diesen Fällen vorprogrammiert., wenn die iconenthaltenden Container nicht durch entsprechende und bescheuerte width-Angaben gefixt werden. Das bedeutet dann aber nicht, dass das Icon früher erscheint, es flackert sich halt dann verzögert in Szene, sozusagen.


    Ich gehe dem Ganzen aus dem Weg, dass ich halt die Icons ins HTML einbette also SVG-Bilder als "echte Tags", ohne CSS und so, aber das hilft hier leider nicht weiter im Thread. Irgendsowas war glaub ich mal in Planung für Joomla 4 wurde aber wieder verworfen.


    EDIT: Vielleicht(!!??) schafft das JCH-Plugin Abhilfe, aber gibts das schon für Joomla 4?

  • Wenigstens, dass der Nutzer nur noch durch JavaScript-Skills Möglichkeiten zum Eingreifen hat.

    Das nehme ich zurück. Das Flackern wirst du wohl los, indem du in der index.php änderst

    Code
    $wa->getAsset('style', 'fontawesome')->setAttribute('rel', 'lazy-stylesheet');

    zu

    Code
    $wa->getAsset('style', 'fontawesome');

    Dadurch laden zwar die Icons selbst immer noch verzögert, aber der Raum, den sie benötigen stimmt vorab schon. Zumindest im Anmeldemodul.

  • Vielen Dank Re:Later . Der «netten Effekt» bin ich jetzt mit ein PNG Bild losgeworden. Ist zwar schade, aber so brauche ich auch keinen zusätzlichen Punkt als Text einzufügen.


    Deine Anleitung werde ich vielleicht trotzdem später mal versuchen. Danke auch dafür.