Flexbox

iOS

Bei der Verwendung von Safari auf iOS wir der Inhalt eines als display: flex  definierten Elements nicht angezeigt.1

Safari auf iOS zeigt ein Fehlverhalten bei der gleichzeitigen Verwendung eines Flexbox-Containers und gefloateten Elementen. In dieser Konstellation werden die gefloateten Elemente nicht angezeigt. Der Container nimmt aber trotzdem die benötigte Grösse ein.

Lösung

  • Float entfernen (wird bei der Verwendung von flexbox, mit Ausnahme als Fallback, sowieso nicht benötigt)
  • Flexbox-Elemente als position: relative  definieren

Label

iOS

Beim Berühren des Labels wird das entsprechende Input Element nicht aktiviert

Safari auf iOS scheint bei Klicks auf ein <span>-Element innerhalb eines <label>-Elements den Klick zu ignorieren und selektiert das entsprechende Input-Element nicht.

Lösung

Über die CSS-Eigenschaft pointer-events: none; kann das Verhalten korigiert werden.

  1. https://roland.codes/blog/legacy-flexbox-invisible-float-bug/ []

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht.