4.9 Contao-Slider nach Update Probleme

[Schnippel]

Hi Leute,

nach dem Update auf Contao 4.9.2 funktioniert der Slider nicht mehr so wie er soll.
Im Anhang ein Bild, welches das Problem zeigt, daß der Slider nicht mehr die Bilder umschließt sondern einen Freiraum nach unten hat. Da das Ganze seit dem Update ist, wollt ich mich mal erkundigen, ob das mit 4.9 zu tun hat?

Unbenannt-1.jpg


Sehe gerade, daß das Ganze völlig aus den Ruder läuft:

Es sind mehrere Slider auf einer der Seite eingebunden.
Im Bild hier Unbenannt-3.jpg ist zu sehen, daß der obere Slider richtig sitzt, der untere das Problem hat..

Hier mal der Link zur Seite

[Spooky]

Poste einen Link zur Seite.

[Schnippel]

Hier der Link

[Spooky]

Sieht bei mir im Firefox und Edge alles korrekt aus.

[Schnippel]

Im Browser FF sieht es auch richtig aus. Im Chrome und Opera ist das Problem. Den Browser-Cache hab ich schon gelöscht und im Contao BE auch Systemwartung durchgeführt.

Da das Ganze unter Contao 4.7 lief und erst ab 4.9 auftritt, denke ich, daß das in Contao irgendwo liegt, daß die Darstellung so unterschiedlich ist.

[Spooky]

Hm, aus irgendeinem Grund denkt Chrome, das letzte Bild hätte eine quadratische Größe (obwohl das nicht so ist). Evt. denkt Chrome dass nur dann, wenn auch ein width und height Attribut am Bild ausgegeben wird, was ja in neueren Contao Versionen der Fall ist (inkl. den neuesten Contao 4.4 Versionen).

[Schnippel]

Und wie lässt sich das Problem beheben? Im CSS für den Slider bzw. dessen img feste Größen angeben?

[Spooky]

Ich würde es erstmal ohne dem sizes Attribut versuchen, das du da eingestellt hast. So wie es aktuell eingestellt ist, wäre es ohnehin falsch.

[Schnippel]

Hm, ich könnte in Photoshop die Bilder auf das passende Maß bringen, z.B. 1000px * 450px oder so.

Laut dem Thema Responisve Image habe ich aber große Bilder hochgeladen, die dann via Bildgrößen eingebunden werden.
Für den Slider sehen die Bildgrößeneinstellungen so hier aus (mobil-first):

Unbenannt-4.jpg

So wie es aktuell eingestellt ist, wäre es ohnehin falsch

Was habe ich falsch gemacht bzw. wie kann ich es richtig machen?

[Spooky]

Was habe ich falsch gemacht bzw. wie kann ich es richtig machen?

Das Sizes-Attribut ist falsch. Du hast angegeben, dass du ab einer Viewport Breite von 1252px das Bild in einer Breite von 1252px darstelltst. Tatsächlich lässt du das Bild aber aber einer Viewport Breite von ca. 1000px das Bild in einer Größe von ca. 976px darstellen. Daher mein Vorschlag, dass du das ohnehin falsche Sizes-Attribut einfach entfernst.

[Schnippel]

Ich habe bei dem dritten (letzten) Slider die Bildgrößeneinstellungen deaktivert, und da passen die Bilder in den Slider ohne die Probleme.
Wenn ich bei den Bildgrößeneistellungen das SIZE-Attribut heraus nehme, gibt es keine Besserung.

Wenn ich die Bildgrößen bei den Sliderbildern also hereaus nehme, dann schaut der Slider gut aus. Aber wie ist es dann mit Performance und Pixeldichte für scharfe Bilder?

[Spooky]

Naja, wenn du immer "scharfe Bilder" haben willst, dann reicht es natürlich auch das Originalbild auszugeben (deine sind ja bspw. 3000px breit) - aber das ist halt ineffizient und schlecht für den Client .

[Schnippel]

Ich habe jetzt nochmal eine zusätzliche Bildgröße speziell für den Slider angelegt:

Unbenannt-4.jpg

Egal ob ich mit dem SIZE-Attribut oder ohne das Ganze mache, das Problem bleibt bestehen, sofern ich mit den Bildgrößeneinstellungen arbeite.
Nehme ich diese raus, dann passt der Slider, was aber wieder ein Rückschritt wäre bezüglich RWD-Bildanpassungen.

Woran kann das liegen?

[Spooky]

Deaktiviere mal das Lazy Loading.

[Schnippel]

Jetzt funktioniert es, sogar auch mit dem SIZE-Attribut..

Danke für die Hilfe bei der Suche nach der Nadel im Heuhaufen..

[Spooky]

Ist wohl ein Bug im Chrome. Chrome berechnet die Größe des noch nicht geladenen Bilds wohl falsch, wenn ein srcset vorhanden ist - oder wenn width & height angegeben ist (oder beides).