SwiperJS flackert bei Flexbox

Hallo,

hat noch jemand das Problem das das der Slider flackert?

Habe folgenden CSS code

Code:

---

                .release-details {
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                        justify-content: space-between;
                        gap: 30px;
                        align-items: flex-start;

                        .release-info {
                                display: flex;
                                flex-direction: row;
                                flex-wrap: wrap;
                                justify-content: space-between;
                                gap: 30px;
                                flex: 1 1 100%;
                                align-content: baseline;
                               
                                .release-cover {
                                        flex: 1 1 100%;
                                }
}
}

---

dabei passt der slider immer die breite an, und der slider flackert.

Ohne den CSS Code passt der slider ohen flackern.... am swiper css/js ist nichts geändert.

Mit dem CSS alleine wird man nichts anfangen können. Poste einen Link zur Seite, wo man das Problem sieht.

Gab paar Vorkommnisse im Slack, da waren es dann Float, Grid o.ä. . Musst du dann selber herausfinden wenn du die Seite nicht verraten willst.

Hab es hier mal versucht nachzubauen...

es flackert zwar nicht, aber es macht den Slider auch nicht korrekt...

https://codepen.io/WebRoxx/pen/NPbYXjx (hier mit CSS-Flex)

https://codepen.io/WebRoxx/pen/KwNoZem (ohne CSS)

wenn man das css der Klasse .release-deatils entfernt passt es wieder...

Die lösung mit "min-width:0" hate auch nichts gebracht

Ich sehe kein Flackern. Du musst schon die richtige Seite posten.

So können wir dir sonst nicht helfen also schlage ich folgendes vor:
Entferne einfach dein komplettes Custom CSS und fang von neu an, wenn du es nicht teilen magst / darfst.

okay, habs wohl doch fixen können mit "min-width", musste nur bei klasse "release-info" & "release-cover"

https://codepen.io/WebRoxx/pen/wBomyKd

Zitat:

---

Zitat von WebRoxx

https://codepen.io/WebRoxx/pen/NPbYXjx (hier mit CSS-Flex)

---

Und warum machst du das so? Also was ist der Hintergrund für dieses Flex Layout vom Parent vom Swiper? Das Problem wird sein, dass durch das Flex Layout die Breite vom Inhalt bestimmt wird - und die Breite vom Slider ist wiederum auch nicht fix definiert - daher springt dann der Browser bei jedem gerenderten Frame zwischen einer Breite von 0 und der Flex Breite.

Zitat:

---

Zitat von Spooky

Und warum machst du das so? Also was ist der Hintergrund für dieses Flex Layout vom Parent vom Swiper? Das Problem wird sein, dass durch das Flex Layout die Breite vom Inhalt bestimmt wird - und die Breite vom Slider ist wiederum auch nicht fix definiert - daher springt dann der Browser bei jedem gerenderten Frame zwischen einer Breite von 0 und der Flex Breite.

---

naja das flex kommt ja von den 3 Spalten der Contentseite.... Slider - Content - Tracklist

der Slider hat keine fixe Breite, warum auch? wenn .release-cover ja definiert ist? aber ja wenn ich statt min-width: 0 -> width: 50% nehme flackert es auch nicht mehr und der slider berechnet die größe richtig... okay dan nist das ja geklärt und passt wunderbar...

Wie gesagt, ein Slider kann keine intrinsische Größe haben - du brauchst irgendwo eine Breite, die "fix" ist. Fix im Sinne von: nicht vom Inhalt diktiert.