[* gelöst *] TOP Responsive Camping Layout - Head-Animation Firefox Problem

  • Guten Morgen,

    das Layout (nur im Head-Bereich) macht plötzlich Probleme in Firefox, ich nutze FF Version 75.0.
    Im IE u. Chrome scheint alles ok, funktioniert perfekt.

    Habe ein Kunden-Projekt mit diesem Template aufgebaut, die Animation im Head funtioniert nicht mehr richtig (hatte aber funktioniert).
    Ich war mir anfangs nicht sicher, ob es an meinem CSS-Code liegt (Projekt abgekoppelt) oder am Layout selbst. Jetzt habe ich gesehen, dass dieses Layout auch auf der Zeta-Layout-Seite (mit FF 75.0) nicht richtig funktioniert.

    Problembeschreibung:

    Im Kundenprojekt (mit FF 75.0 ) reagiert der Navigationsbereich erst wenn ich mit der Maus drüberfahre. Dann gibt es ein ruck nach oben, oder nach unten, je nachdem wo sich der Browser-Scrollbalken (Position) befindet.

    Auf der Zeta-Layout-Vorschau-Seite reagiert der Kopfbereich erst nach ein paar Sekunden (nach dem Scrollen nach unten, oder oben) und verhält sich etwas anders als beim Kundenprojekt... aber auch fehlerhaft.

    Es geht um: TOP Responsive Camping

    Kann das jemand bestätigen?

    Liegt es evtl. an FF 75.0?

    Freundlich grüßt Sie/Dich/Euch

    acanthus

  • Zur hilfreichsten Antwort springen
  • Hallo,

    ich kann bei "Top Responsive - Variante Camping" im Firefox feststellen, dass die Animation des Topline-Bereichs (Navigation, Logo, ...) nicht ganz korrekt funktioniert. In meinen Tests wurden die Inhalte der Topline nicht mehr vertikal zentriert, nachdem die Höhe der Topline nach dem Scrollen animiert kleiner wurde.

    Das Phänomen tritt nur im Firefox auf und nur mit der Camping-Variante des Layouts Top Responsive.

    Kann ein Fehler in Firefox sein. Ich schau mir das aber mal an.

    Freundliche Grüße
    Steffen T. (Zeta Producer-Support)

  • Danke Steffen, dass Sie sich dieses "Phänomen" mal anschauen... :)

    Der Fehler mit dem "vertikal zentriert" kommt bei mir nicht vor.
    Wenn man runter-scrollt wird der #topline Bereich schmaler, was ja auch richtig ist.... aber die Navigation bewegt sich nicht mit. Nachdem man mit der Maus drüberfährt, zuckt die Navigation nach oben. (an die Position wo es eigentlich nach der Animation sein sollte). Wie bereits erwähnt: Bei den anderen Browsern scheint es zu funktionieren, nur eben bei Firefox nicht (aufgefallen bei FF 75.0).

    Freundlich grüßt Sie/Dich/Euch

    acanthus

  • Nun, da scheint Firefox neuerdings Probleme mit der CSS-Eigenschaft "float" zu haben.

    Da es nur im Firefox auftritt, ist das vermutlich ein Fehler in der aktuellen Browser-Version.

    Ich könnte das evtl. durch eine neuere Technik ersetzen, weiß aber noch nicht, ob das dann auf andere Elemente einen negativen Einfluss hat.

    Das muss ich genau testen und dann gibt es da evtl. ein Online-Update.

    Das hat aber derzeit keine Priorität.

    Evtl. ist das nämlich mit dem nächsten Firefox-Update schon wieder ok.

    Also bitte mal beobachten.

    Freundliche Grüße
    Steffen T. (Zeta Producer-Support)

  • Hallo Steffen, danke erstmal für die Info.

    Das mit der Firefox-Version glaube ich auch, denn vorher funktionierte es einwandfrei.

    Haben Sie denn evtl. eine "CSS-Notlösung", die man vorübergehend verwenden könnte?
    Habe vor ein paar Wochen ein Kunden-Projekt mit diesem Layout fertiggestellt und stehe jetzt etwas unter "Zugzwang".
    Wäre sehr freundlich, wenn Sie mir helfen würden/könnten.

    Freundlich grüßt Sie/Dich/Euch

    acanthus

  • Hallo halloTaxi,

    das ist wirklich ärgerlich, so ähnlich sieht es bei meinem Kundenprojekt auch aus.

    Es liegt scheinbar wirklich an Firefox 75.0. Ich habe mir schon gedacht, dass ich nicht der einzige bin der dieses Problem hat.

    Das muss ich genau testen und dann gibt es da evtl. ein Online-Update.

    Das hat aber derzeit keine Priorität.

    Hat es für Sie wirklich keine Priorität, wenn diverse Kundenprojekte von Zeta-Nutzern nicht mehr richtig funktionieren, oder habe ich das jetzt falsch verstanden?
    Für mich persönlich hat die Suche nach einer Lösung (z.Z) die höchste Priorität. Mein Kunde verlangt eine Lösung von mir. Daher wäre es sehr freundlich wenn Sie mich (uns) etwas unterstützen würden.

    Freundlich grüßt Sie/Dich/Euch

    acanthus

  • Eventuell hilft https://www.drupalcenter.de/faq/14858 weiter. Dort geht es ebenfalls um die Interpretation von "float". Bitte bis ganz zu Ende lesen.

  • Hallo Thomas,

    ich werde mir das morgen Früh durchlesen und es mal ausprobieren. Wenn ich etwas hilfreiches finden sollte werde ich es hier posten.

    Vielen Dank für den Hinweis!

    Freundlich grüßt Sie/Dich/Euch

    acanthus

  • Hallo Acanthus,

    eventuell wäre es sinnvoll, das Problem auch an Firefox zu melden, Sonst kriegen die ja gar nicht mit, dass die aktuelle Version Probleme macht.

  • Hallo Acanthus,

    mit Verlaub, aber ich finde Deine Formulierungen/Forderungen etwas überzogen. Auch ich nutze „Top Responsive“ und kann das Problem somit reproduzieren. Natürlich ist es ärgerlich …

    Tatsache ist aber, dass das Problem nicht „scheinbar“ sondern „anscheinend“ von Firefox verursacht wird. Ich sehe somit auch keinen Handlungsbedarf seitens ZP.

    Zudem sollte man sich vor Augen halten, welchen Marktanteil Firefox derzeit noch besitzt. Vielleicht solltest Du Beides Deinem Kunden einfach kommunizieren.

    Ich finde, dass das ZP-Team äußerst hilfsbereit ist und lösungsorientiert arbeitet. Bei Programmierfehlern werden Updates teilweise binnen Stunden bereitgestellt. Dass Mozillas Programmierfehler nun nicht oberste Priorität in der Entwicklungsabteilung von ZP genießen, halte ich somit durchaus für nachvollziehbar.

    Ansonsten kann mich mich nur Hanabis Worten anschließen.

    Viele Grüße

    Tom

  • Mich wundert nur, dass es beim Layout "Top Responsive Data" und "Top Responsive Museum" funktioniert:
    https://content.zeta-producer.com/layouts/top-responsive-data/
    https://content.zeta-producer.com/layouts/top-responsive-museum/

    und bei "Top Responsive Caming" nicht mehr, auch nicht in der Layout Vorschau:
    https://content.zeta-producer.com/layouts/top-responsive-camping/

    Es kann sich also nur um geringe Programmierunterschiede handeln. Aber welche?

    Das "Firefox CSS Float Problem" in der neuen Browser Version ist bekannt (einfach mal googlen). Die Probleme treten im Crome und Edge nicht auf.

  • Guten Morgen zusammen,

    Hanabi

    Thomas, DAAANKEEEE.... :thumbup:
    Der Artikel ist super! Es funktioniert wieder!

    Habe die CSS hiermit ergänzt:

    Code
    #topline .wrapper {
        overflow: hidden;
    }

    Getestet in IE, Firefox und Chrom. Funktioniert einwandfrei.
    Kann das bitte jemand testen und bestätigen?

    Freundlich grüßt Sie/Dich/Euch

    acanthus

  • Der CSS-Code funktioniert zwar für die Animation im Head, aber nun gibt es ein Problem mit den Sub-Menüs.

    overflow und z-index (damit Sub-Menüs im Vordergrund sichtbar sind) funktionieren (in Kombination) nicht richtig.

    Für Layouts die keine Unterpunkte im Menü haben ist die Lösung ok, für alle Anderen muss noch etwas "gebastelt" werden.

    Hat jemand eine Idee?

    Ich schaue mir das Ganze auch nochmal an...

    Freundlich grüßt Sie/Dich/Euch

    acanthus

  • Zitat

    Für mich persönlich hat die Suche nach einer Lösung (z.Z) die höchste Priorität. Mein Kunde verlangt eine Lösung von mir.

    acanthus

    Als Übergangslösung habe ich im Layout die Einstellungen für "Topline" geändert und zwar so, dass ich die Höhen-Differenz zwischen "Normal" und "Nach Scrollen" verkleinert habe.
    So ist der Effekt zwar nicht so, wie er sein soll, der Fehler fällt aber kaum noch auf. Quasi als Notlösung, bis es im FF wieder funktioniert.

  • halloTAXI

    Als Notlösung sieht es erst einmal ganz ok aus.... auf den ersten Blick. Ansonsten verhält sich der Head-Bereich immer noch fehlerhaft.

    ➔ Das Problem dabei ist: Wenn man runter und dann wieder hoch scrollt, anschließend mit der Maus einen Unterpunkt berührt, zuckt die Navigation nach oben oder unten.

    Das gleich scheint man jetzt auch im Zeta-Layout gemacht zu haben (?).
    https://content.zeta-producer.com/layouts/top-responsive-camping/


    Ich verstehe das Ganze nicht wirklich. Ein Layout ist meiner Meinung nach das Endprodukt. Ich kann daher nicht richtig nachvollziehen warum sich nicht ernsthaft um dieses Layout-Problem gekümmert wird.


    Drcymbal

    Zitat

    Zudem sollte man sich vor Augen halten, welchen Marktanteil Firefox derzeit noch besitzt. Vielleicht solltest Du Beides Deinem Kunden einfach kommunizieren.

    Welchen Firefox-Marktanteil hättest Du denn gerne, damit das Layout-Problem als wichtig eingestuft wird? Es freut mich für Dich, dass Du das alles so locker siehst...

    Freundlich grüßt Sie/Dich/Euch

    acanthus

    Einmal editiert, zuletzt von acanthus (27. April 2020 um 08:26)

  • Eine Problemlösung scheint mir auch wichtig. Ein weiteres Projekt macht ähnliche Probleme.
    Hier "springt" die Navigation bereits bei Mouseover über der Hauptnavigation (nicht erst beim Untermenü).
    Es handelt sich allerdings um ein ZP14 Projekt. Wenn ich wüsste, ob ZP15 Abhilfe schafft, würde ich es konvertieren:

    https://www.globalmetal.eu/

    • Hilfreichste Antwort

    Hallo Zusammen,

    das Ganze hat(te) nichts mit den Schrägen zu tun, sondern mit der Ausrichtung von Logo und Navbereich.

    Nur wenn das Logo links steht, tritt der Fehler in Firefox auf.

    Und die Ursache ist hier das CSS-Float.

    Ich hab das Float nun durch Flexbox ersetzt und das Layout aktualisiert.

    Bitte in ca. 30 Minuten auf "Extras | Updates suchen" klicken, um das Update zu laden.

    Wenn Sie direkt keine Veränderung sehen, dann mal die Tastenkombination Strg+Shift+T drücken.

    Freundliche Grüße
    Steffen T. (Zeta Producer-Support)

  • Hallo Steffen,

    funktioniert perfekt! :thumbup:

    Das Problem wäre damit gelöst. :thumbup:

    Vielen Dank, dass Sie sich darum gekümmert haben!

    Freundlich grüßt Sie/Dich/Euch

    acanthus

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!