Flexbox Problem im IE11: Elemente mit äußerst geringer Breite übereinander gestapelt statt nebeneinander (Firefox & Chrome funktionieren)

[Johannes K]

Hallo,

ich habe vor einem Monat versucht, unsere Webseite responsiv umzubauen mit Flexbox. Das hat dank der Anleitung im Wiki auch sehr gut geklappt, vielen Dank! Nun habe ich jedoch beim Testen von einem Polyfill für das details-Element die Webseite mal mit IE 11 angeschaut (mithilfe eines Onlinedienstes, da ich keinen IE zur Verfügung habe).

Dabei habe ich festgestellt, dass alles innerhalb von <main> unlesbar ist: Anstatt wie bei Firefox & Chrome nebeneinander werden die aside-Elemente und das article-Element mit ganz geringer Breite und überlappend dargestellt - siehe Bildschirmfoto:

Wer kann mir helfen und weiß, woran das liegt? Mit https://github.com/philipwalton/flexbugs habe ich mich beschäftigt, konnte aber nichts passendes dort finden.

Herzlichen Dank & Grüße, Johannes

[Matthias Scharwies]

Servus!

Dabei habe ich festgestellt, dass alles innerhalb von <main> unlesbar ist: Anstatt wie bei Firefox & Chrome nebeneinander werden die aside-Elemente und das article-Element mit ganz geringer Breite und überlappend dargestellt - siehe Bildschirmfoto:

Evtl. liegt es nicht an Flexbox, sondern am main-Element:

Beachten Sie: IE9-11 unterstützen das main-Element nicht. Allerdings ist ein Einsatz problemlos möglich, wenn Sie es im CSS mit display: block; auszeichnen.

Du hast das zwar gemacht, das display:block wird aber überschrieben. Evtl. würde ich es doch mal mit <div id="main">probieren, ob's dann klappt.

Deine Seite sieht gut aus.

Evtl würde ich bilder/Praedikat_besonders_lecker-mr.pngzumindest außerhalb des Rings einen transparenten Hintergrund geben, damit die Struktur sichbar wird.

Falls Du Dein Problem nicht lösen kannst: So eine Seite wie deine wird mit dem Handy angeschaut (wo alles funktioniert) und nicht auf einem Büro-Rechner, dessen Systembetreuer auf IE11 besteht. Mit der nächsten Welle Neuanschaffungen wird der IE11 verschwinden.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Du hast das zwar gemacht, das display:block wird aber überschrieben. Evtl. würde ich es doch mal mit <div id="main">probieren, ob's dann klappt.

Nein! Um ein Darstellungsproblem in IrgenEinem exotischen Browser zu fixen die Seite für alle anderen schlechter zu machen, das kann unmöglich dein Ernst sein.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Felix Riesterer]

Lieber Gunnar,

die Seite für alle anderen schlechter zu machen

der Unterschied zwischen <main> und <div id="main"> ist im Rahmen von HTML&CSS vernachlässigbar. Wenn es um assisitive Technologien geht, insbesondere um (W)ARIA-Gedöns, sieht die Semantik mit dem Div klar schlechter aus. Um das zu reparieren benötigt man eine Menge Ergänzungen, die man sich mit dem <main> sparen kann.

Kannst Du dieses "schlechter" quantifizieren?

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@Felix Riesterer

der Unterschied zwischen <main> und <div id="main"> ist im Rahmen von HTML&CSS vernachlässigbar.

Im Rahmen von CSS ist schlicht kein Unterschied vorhanden. (Das war mal bei Uralt-IEs, denen man mit dem html5shim auf die Sprünge helfen musste.)

Im Rahmen von HTML ist der Unterschied essentiell. HTML ist von Grund auf so angelegt, dass Webseiten auf unterschiedlichsten Geräten mit verschiedenen Eingabe- und Ausgabemöglichkeiten funktionieren – wenn man denn die HTML-Elemente und -Attribute ihrer Bestimmung nach einsetzt (und nicht ihrer rein visuellen Darstellung).

Kannst Du dieses "schlechter" quantifizieren?

div hat keine Bedeutung, main hat eine. Auch wenn es keinen visuellen Unterschied macht – für AT macht es einen, wie du ja selbst sagst:

Wenn es um assisitive Technologien geht, insbesondere um (W)ARIA-Gedöns, sieht die Semantik mit dem Div klar schlechter aus. Um das zu reparieren benötigt man eine Menge Ergänzungen, die man sich mit dem <main> sparen kann.

In dem Fall wäre es nur eine: role="main". Aber das widerspricht der ersten Direktive: Verwende nicht ARIA, wenn es ein entsprechendes HTML-Element für diesen Zweck gibt.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Felix Riesterer]

Lieber Gunnar,

OT:

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

da fehlt mir eindeutig ein Stay reasonable!

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo Felix,

ich war eine Woche in Salzburg, und die waren da überhaupt nicht reasonable, was die Lockerheit mit der Maske anging... Man ist im Supermarkt und keiner trägt Maske, statt dessen betatscht irgendeine Frau systematisch alle Pfirsiche (und zwar mit Druck), in der Gaststätte sitzt jemand am Nachbartisch und schnieft vor sich hin - nach 3 Monaten Colodo^[1] gruselt es einem dabei.

Rolf

"Be rational!" - "Be real!"
              --- i vs π

---

1. Corona Lock Down? ↩︎

[Felix Riesterer]

Lieber Rolf,

und die waren da überhaupt nicht reasonable

und genau deshalb könnte Gunnar das in seine Sig aufnehmen. Dann wird's in Salzburg vielleicht besser...?

Liebe Grüße

Felix Riesterer

[JürgenB]

Hallo,

für dem IE würde ich keinen Aufwand mehr betreiben. Ich würde mit supports prüfen, ob der Browser flex unterstütz, und nur dann dem main ein display flex geben:

@supports (display: flex) {
  main { display: flex }
 ...
}

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

für dem IE würde ich keinen Aufwand mehr betreiben. Ich würde mit supports prüfen, ob der Browser flex unterstütz, und nur dann dem main ein display flex geben:

@supports (display: flex) {
  main { display: flex }
 ...
}

Wobei der IE dann main { display: flex } nicht anwendet – und zwar nicht dehalb, weil er display: flex nicht unterstützen würde (tut er nämlich), sondern weil er @supports nicht unterstützt und deshalb den ganzen Block ignoriert.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Rolf B]

Hallo Johannes,

ich habe mir deine Seite mal angeschaut.

Zuerst: Wenn man im CSS irgendwass speziell für den IE machen will, muss das mit -ms- beginnen. -webkit- ist Android, Chrome und Safari. Und für die brauchst Du kein Präfix mehr. Der IE10 unterstützt Flexbox mit -ms- Präfix, der IE11 braucht kein Präfix mehr. Die Probleme des IE sind darin begründet, dass die Flexbox-Implementierung massiv fehlerhaft ist. Es kann durchaus sinnvoll sein, für den IE11 die Basis-Darstellung (mit sinnvoller Maximalbreite von z.B. 50em) zu setzen, die Du sonst nur für schmale Viewports wählst, statt sich mit den Flexbugs herumzuschlagen.

Es gibt gelegentlich auch Pixellöcher, d.h. bei einer Breite unter 50em hast Du eine Darstellung 1, bei genau 50em die Darstellung 2 und bei über 50em die Darstellung 3. Das passiert in Chrome genauso wie im IE. Aufgefallen ist mir das beim padding-left:2em für #content, das Du an max-width gebunden hast. Verwende entweder nur min- oder nur max-, aber nicht beides. Man muss dafür ggf. die Regeln etwas umsortieren und umformulieren, aber es müsste eigentlich immer machbar sein.

Was im IE schlecht funktioniert, ist eine Basisbreite von 0. Die solltest Du auf einen sinnvollen Wert setzen, z.B. 8em, und flex-shrink auf 0 lassen. Flex-Shrink (den zweite Parameter der flex-Eigenschaft) braucht man vor allem, wenn die Breite nicht ausreicht und der Browser die Flex-Elemente automatisch schmaler machen soll. Der erste Parameter der flex-Eigenschaft ist flex-grow, damit erlaubst Du zum einen das automatische Verbreitern und zum anderen gibt das Verhältnis der flex-grow Werte an, welches Flex-Element wie stark verbreitert wird. Aber das bewirkst Du ja schon mit deinen Media-Queries. Also flex: 1 0 10em für die asides. Das sollte auch für andere Browser gut sein.

Abgesehen davon hat die Seite auch in Chrome ihre Quirks.

Im Breitenbereich 951-960px ist der Newsletter-aside oben rechts und viel zu breit. Irgendwo ist da ein Loch in deinen Media-Breaks, ich hab's nur noch nicht gefunden.

Im ganzen Bereich 800-950px (50em bis knapp vor 60em) ist die Newsletter-Anmeldung unten, aber überlappt sich mit dem anderen aside, das sticky ist. Du hast da zwar irgendwelche Magie mit IntersectionObserver programmiert, aber wenn die dafür gut sein soll, funktioniert sie nicht. Das ist mir jetzt zu kompliziert (heißt: das kostet mich zu viel Zeit), um es zu durchdringen.

Im Bereich knapp oberhalb von 50em ist dein Menü zu breit, es ragt dann rechts aus dem Bildschirm hinaus. Ggf. musst Du die Lücken zwischen den Menüpunkten reduzieren. Abgerundete grüne Rahmen auf einem grünen Hintergrund sehen für mich ohnehin etwas merkwürdig aus.

Rolf