Verzerrte Bilder in der Gallerie in Firefox

Aktuell arbeiten wir noch im Hintergrund an der Foren-Struktur, daher kann es vorkommen das noch nicht alles zu 100% passt. Sowohl die Foren-Bereiche, Labels, Berechtigungen, Icons und das verschieben der Themen in die entsprechende Bereiche wird noch alles durchgeführt, sobald das abgeschlossen ist entfernen wir diesen Hinweis auch.
1st Official Post

    WordPress 6.9.4
    Element "Galerie" (in Kombination mit Plugin "Simple Lightbox" 2.9.5).
    Galerie auch mehrmals auf einer Seite.
    Galerie-Einstellung "Bilder zuschneiden und einpassen" ist AUS!
    Seitenverhältnis = Original.

    Die Darstellung während der Bearbeitung ist noch korrekt.
    Nach dem Speichern, also beim Anzeigen der Seite, sind die ersten 3 Bilder der Seite noch korrekt.
    In Firefox (auf Linux und Windows) ist ab dem 4. Bild auf der Seite die Darstellung der Bilder verzerrt. Alle Bilder werden in ein einheitliches gekacheltes Querformat ca. 1:2 verformt.
    Der Fehler tritt seit einigen Tagen auf.

    Die Darstellung in anderen Browsern ist in Ordnung (z.B. Brave, Edge, Chrome).

    Beispiel: https://fotodrachen.de/naturgarten/einheimische/apiales/

    Liegt es an WordPress oder am Firefox oder verstehen die beiden sich nicht mehr?

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Wenn du Fragen hast, kannst du dich gerne jederzeit an @Maximilian Rupp wenden

    Hinweis: folgt noch

    Welche Firefox Version? Bist Du in WordPress angemeldet, wenn der Effekt auftritt? Kannst Du einen Screenshot posten? Hier sieht es derzeit so aus:


    Was allerdings auffällt, ist ein Scriptfehler in der Browser Console (google), der unter Umständen Einflüsse auf Deine Darstellung haben könnte:

    Code
    Uncaught DOMException: Document.querySelectorAll: '.ct-has-link-overlay.is-layout-slider .flexy-item:has(> * > .ct-link-overlay)' is not a valid selector
in Zeile 6 von /wp-content/themes/blocksy/static/bundle/main.js?ver=2.1.38

    Versuche es mal mit deaktiviertem Simple Lightbox Plugin und leere Deinen Browser Cache. Tritt das Problem dann auch auf?

    Quote from Fotodrachen

    In Firefox (auf Linux und Windows) ist ab dem 4. Bild auf der Seite die Darstellung der Bilder verzerrt. Alle Bilder werden in ein einheitliches gekacheltes Querformat ca. 1:2 verformt.
    Der Fehler tritt seit einigen Tagen auf.

    Ist bei mir am Mac auch so, sozusagen ab der zweiten Reihe tritt der Fehler in den Vorschaugrafiken auf und nur beim aktuellen FF.

    Mit freundlichen Grüßen von Peter,
    der sich mit WP kaum auskennt

    Sorry, aber ich wüsste nicht, wo ich da genau schauen müsste oder wie ich das lesen sollte. Die Console öffnen ist klar ... aber dann hört es auf. :/

    Mit freundlichen Grüßen von Peter,
    der sich mit WP kaum auskennt

    Quote from b3317133

    Siehst Du auch Scriptfehler in der o.g. Browser Console?

    Ich habe keine Fehler in der Console.

    Das Problem scheint zu entstehen, wenn quadratische Bilder in ein rechteckiges Format gequetscht werden.

    Hilf uns dir zu helfen! Ein Link zur Seite ist meist hilfreich. Auch der Webseitenbericht unter Werkzeuge/Website-Zustand/Bericht kann wichtige Informationen liefern

    Danke für die vielen schnellen Antworten.

    Quote from KuSin

    Leere mal den Cache und schau es dir nochmal an.

    Standard-Frage - Standard-Antwort: Natürlich habe ich mehrfach den Cache geleert.

    Quote

    Welche Firefox Version?

    Ich nutze immer die aktuelle stabile Version:
    Unter Win10 die Firefox-Version 150.0.1.
    Unter Ubuntu ebenfalls die Version 150.0.1 (64-Bit) aus Snap.

    Quote

    Bist Du in WordPress angemeldet, wenn der Effekt auftritt?

    Firefox ist mein Alle-Tage-Browser, daher nutze ich ihn auch für die Administration. Der Link "Seite bearbeiten" wird angezeigt, also bin ich wohl angemeldet.
    Aber (frisch getestet): Explizites Abmelden (und Cache leeren) verbessert die Darstellung nicht.
    Außerdem:

    Quote

    Ist bei mir am Mac auch so, sozusagen ab der zweiten Reihe tritt der Fehler in den Vorschaugrafiken auf und nur beim aktuellen FF.

    Quote

    es ist die "Wilde Möhre", oder?

    Ja, steht ja in der Überschrift ;)

    Quote

    wenn quadratische Bilder in ein rechteckiges Format gequetscht werden.

    Es soll ja nicht gequetscht werden. Die Einstellungen für die Vorschau sind unbeschnitten im Original-Seitenverhältnis.
    Das Bild-Format wird aber ab dem 4. Bild oder der 2. Reihe ignoriert.

    Quote

    Versuche es mal mit deaktiviertem Simple Lightbox Plugin und leere Deinen Browser Cache. Tritt das Problem dann auch auf?

    Ja, dann tritt das Problem in der Vorschau-Übersicht auch noch auf.

    Code
    in Zeile 6 von /wp-content/themes/blocksy/static/bundle/main.js?ver=2.1.38

    Damit ist das Thema "Blocksy" mein neuer Hauptverdächtiger.

    Ich werde es morgen mal mit einem anderen Thema in einer lokalen Kopie der Webseite versuchen.

    Deine Bilder haben feste Maße für Höhe und Breite, während das Responsive Design gleichzeitig 100% Breite erzwingt, um sich dem Bildschirm anzupassen. Dadurch werden die Bilder je nach Fenstergröße entweder gestreckt oder gestaucht, weil die Proportionen nicht mitwandern. Da im css Code zB. kein heigh: auto; hinterlegt ist (ich habe es beim überliegen nicht gelesen), fehlt der Schutz gegen diese Verzerrung.

    Quote from Baldini

    Deine Bilder haben feste Maße für Höhe und Breite,

    Diese festen Maße sollten sich errechnen aus dem Seitenverhältnis des Bildes (nicht beschnitten) und der Konfiguration "Spalten" des Elementes "Galerie".
    Das hat seit Jahren funktioniert und funktioniert auch weiterhin in allen anderen Browsern, nur nicht mehr im aktuellen Firefox seit ein paar Tagen.
    Das Vorschaubild wird innerhalb einer Art Tabelle (= Galerie) angezeigt.

    Durch die unterschiedlichen Seitenverhältnisse der Bilder bzw. Hoch- und Querformat ergeben sich dann Zwischenräume. Das sieht etwas unordentlich aus, wird aber in Kauf genommen, damit nicht durch einen Beschnitt wichtige Bildelemente verloren gehen.

    Nach Klick ins Bild tritt die "Lightbox" in Aktion und zeigt eine große Version des Bildes, aber auch im Original-Seitenverhältnis - wie auch sonst. Das funktioniert weiterhin.

    Deaktivierte das Simple Lightbox Plugin bis das Problem gelöst ist. Sonst wird man nie wissen, ob/welche Wechselwirkungen in welchen Browsern auftreten.

    Und poste noch Deine Browser Console wenn das Problem auftritt, siehe oben.

    Firefox hält sich an deine festen Höhenangaben in deinem Code und erzwingt diese, egal wie breit das Bild gerade im Container gezogen wird. Edge und Chrome hingegen ignorieren die feste Höhe, um Verzerrungen zu vermeiden. Warum? Ist halt so. Da die Bilder aber unterschiedliche Originalformate haben, wirkt das Layout dort völlig uneinheitlich und gewürfelt. Ohne ein zB. klares "high: auto;" in deiner css wissen die Browser schlichtweg nicht, wie sie die Proportionen bei variabler Breite, das ist ein responsive Design, einheitlich behandeln sollen.

    Quote from b3317133

    Deaktivierte das Simple Lightbox Plugin bis das Problem gelöst ist.

    Das Deaktivieren löst das Problem nicht. Es liegt nicht an diesem Plugin, habe ich getestet, siehe oben.

    Es ginge damit aber Funktionalität verloren. Jetzt kann man alle Bilder der Seite als große Version durchblättern, wenn in ein Bild geklickt wird.

    Wenn ich das Plugin deaktiviere wird bei Klick nur ein einziges Bild in groß angezeigt, ohne Funktionalitäten, Sackgasse. Ich muss die Zurück-Funktion des Browsers nutzen um wieder in die Übersicht zu kommen.

    Quote from Baldini

    in deinem Code

    Ich schreibe den Code doch nicht selbst. Weder HTML, noch Javascript noch nutze ich eigenes CSS.

    Ich nutze das CMS "WordPress" und seine Plugins um nicht selbst Code schreiben zu müssen. Ich konfiguriere lediglich die Elemente über die Admin-Oberfläche. Wenn die gängigsten Browser den Code unterschiedlich auslegen, sollte das im Code (von WordPress oder Plugins) berücksichtigt werden.

    Bis vor ein paar Tagen hat das auch immer funktioniert und ich habe den Code und die Konfiguration nicht geändert.

    Quote from Baldini

    Firefox hält sich an deine festen Höhenangaben in deinem Code und erzwingt diese, egal wie breit das Bild gerade im Container gezogen wird. ... Ohne ein zB. klares "high: auto;" in deiner css wissen die Browser schlichtweg nicht, ...

    Für die Bilder ist in den WordPress inline Block Styles entspr. CSS hinterlegt.

    CSS
    .wp-block-gallery.has-nested-images figure.wp-block-image img {
  display: block;
  height: auto;
  max-width: 100% !important;
  width: auto;
}

    Das Problem scheint lt. der Beschreibung bei Fotodrachen nur den neusten Firefox zu betreffen. Wenn man bei Firefox einen entspr. Bug Report einreichen möchte, wird in der Regel gefordert, alle sonstigen Einflüssen auszuschliessen, daher der Hinweis auf das Deaktivieren des Lightbox Plugins.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!

Register Yourself Login