Flexbox-Inhalte für Safari (iPhone und iPad)

Bei der Darstellung von Flexboxen gibt es leider immer noch unterschiedliche Standards in den aktuell genutzten Browserversionen. Daher muss man bei der Nutzung von Flexboxen die entsprechenden Syntaxvorschriften etwa für Firefox, Internet Explorer, Chrome und Safari beachten. Wie das funktioniert, ist in den Grundzügen hier beschrieben.

Trotzdem hatte ich das Problem, dass die Flexboxinhalte sowohl im iPad als auch in der gerenderten Bildschirmdarstellung von Google Pagespeed nicht korrekt umgebrochen wurden, und die zu wrappenden Boxen samt ihren Inhalten über den rechten Bildschirmrand hinausreichten. Die Ursache dafür war, dass ich die (in diesem Fall drei) zu wrappenden Boxen mit einer dynamischen Breite versehen habe, also ihnen eine CSS-Angabe der Form width:33%;min-width:300px; mit auf den Weg gegeben habe.

Auf dem Desktop-Computer zeigten Firefox, Internet Explorer und Chrome den gewünschten Effekt, nämlich drei Flexboxen, die jeweils 33% des Bildschirms einnahmen und bei Verkleinerung des Bildschirms selber kleiner wurden. Erst bei Erreichen der angegebenen Mindestbreite von 300px setzte dann gegebenenfalls der Wrap-Effekt ein.

Der Safaribrowser hingegen schien die min-width innerhalb der zu wrappenden Box nicht korrekt zu beachten und ging anscheinend stets von einer Breite von 33% aus, die er dann entsprechend auch nicht umbrechen musste. Im Effekt standen also alle drei Boxen in der für sich selbst genommen korrekten Breite nicht umgebrochen nebeneinander und liefen so nach rechts aus dem Bildschirm raus. Interessanterweise stellte Google Pagespeed dies zwar graphisch dar, monierte aber in der Bewertung keine Verletzung des Viewports (= Darstellungsbereichs).

Da ich bislang keine andere Lösung gefunden habe, habe ich zunächst die zu wrappenden Boxen mit einer starren Größe versehen (width:300px). Der Effekt beim Zusammenschieben der Bildschirmgröße ist nun zwar etwas weniger dynamisch anzuschauen, aber dafür scheint es nun in allen Browsern korrekt zu klappen.

You may also like...