it-swarm.com.de

Flexbox umschließt die letzte Spalte der ersten Zeile in Safari

Die letzte Spalte der ersten Zeile wird beim Anzeigen in Safari und einigen anderen iOS-basierten Browsern in die nächste Zeile umbrochen.

Safari:

 enter image description here

Chrome/Andere:

 enter image description here

Code:

.flexthis {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.flexthis .col-md-4 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
<div class="row flexthis">
  <div class="col-md-4 col-sm-6 text-center">
    <div class="product">
      <img src="img.jpg" alt="" class="img-responsive">
      <h3>Name</h3>
      <p>Description</p>
    </div>
  </div>
</div>

51
DN.

Nur um meine Frage zu aktualisieren

Dies ist die Lösung, mit der ich gehe, dies ist offensichtlich für Bootstrap4 behoben, das Flexbox-kompatibel ist. Das ist also nur für bootstrap3.

.row.flexthis:after, .row.flexthis:before{
  display: none;
}
9
DN.

Erklärung

Dies geschieht, weil Safari vor und nach Pseudo-Elementen so behandelt, als wären sie echte Elemente. Z.B. Denken Sie an einen Behälter mit 7 Gegenständen. Wenn der Container über: Vorher und Nachher verfügt, positioniert Safari die Elemente wie folgt:

[:before ] [1st-item] [2nd-item]

[3rd-item] [4th-item] [5th-item]

[6th-item] [7th-item] [:after  ]

Lösung

Als Alternative zur akzeptierten Antwort entferne ich: before &: after aus Flex-Containern, anstatt den HTML-Code zu ändern. In Ihrem Fall:

.flexthis.container:before,
.flexthis.container:after,
.flexthis.row:before,
.flexthis.row:after {
   content: normal; // IE doesn't support `initial`
}
109
Taylan

Ich weiß, dass das Problem ziemlich alt ist, aber ich bin heute auf dieses Problem gestoßen und habe es über 12 Stunden damit verschwendet, es zu beheben. Obwohl ungefähr 10 Stunden davon aufgewendet wurden, um festzustellen, dass die Safari mit dem 12-Säulen-Bootstrap-Grid fehlschlägt, ist dies kein anderes Problem.

Fix, das ich gemacht habe, ist ziemlich einfach. Hier ist die Version für Visual Composer. Klassennamen können für andere Frameworks variieren.

.vc_row-flex:before, .vc_row-flex:after{
  width: 0;
}
5
Gaurav

Ich wollte keine weiteren Klassen hinzufügen, um diese Art von Fehler zu beheben.... Alternativ können Sie auch die .row-Klasse selbst reparieren.

.row {
    &:before {
        content: none;
    }

    &:after {
        content: '';
    }
} 
3
Joeri Wauters

Bei diesem Problem wurde versucht, ein einfaches Grid mit Bootstrap für das TwentyThree CMS zu erstellen. In Safari wurde derselbe Fehler gefunden. Wie auch immer, das hat es für mich gelöst:

.flex-container:before {
  display: inline;
}
2
user5373314

Bootstrap 4 hat Probleme mit der Anzeige: block; Eigenschaft, wenn entweder von css oder von Javascript für die .row-Klasse festgelegt. Ich habe eine Lösung dafür gefunden Erstellen Sie einfach eine Klasse als:

.display-block {
	display: -webkit-box !important;
	display: -ms-flexbox !important;
	display: flex !important;
	-ms-flex-wrap: wrap !important;
	flex-wrap: wrap !important;
}

Wenden Sie dann diese Klasse an, wenn Sie die Zeile anzeigen möchten.

1
Farhan

Ich konnte es durch Hinzufügen beheben

.row:before, .row:after {
display: flex !important;
}

Natürlich ist dies nicht die eleganteste Lösung, aber es kann für einige in der Zwischenzeit funktionieren, bis sie es beheben.

0
ashamun

Ich hatte das gleiche Problem und die Antwort war, dass die Flexbox auf Safari die Floats nicht mit dem gleichen Div zu löschen scheint, das angezeigt wird: Flex. 

0
Cam Tullos
.row:before, .row:after {
content:'';
display:block;
width:100%;
height:0;
}
.row:after {
clear:both;
}
0
Enot

Ich habe auch ein paar Stunden mit diesem Thema verbracht. In meinem Fall habe ich Flexbox in ein vorhandenes Projekt eingefügt, damit alle Elemente in einer row die gleiche Höhe haben. Alle Browser außer Safari renderten es korrekt, aber keine der obigen Antworten schien mein Problem zu beheben.

Bis ich entdeckte, dass noch ein Bootstrapclearfix-Hack verwendet wurde: (Code stammt aus einem laravel -Projekt, ansonsten aber generischer Bootstrap

@foreach ($articles as $key => $article)
    @if ($key % 3 === 0)
        <div class="clearfix hidden-xs hidden-sm"></div>
    @endif
    @if ($key % 2 === 0)
        <div class="clearfix hidden-lg hidden-md"></div>
    @endif

    etc...
@endforeach

Offensichtlich ignorieren andere Browser als Safari den .clearfix in gewisser Weise, wenn Flexbox verwendet wird.

Wenn Sie also Flexbox für Ihre Spalten verwenden, müssen Sie den Clearfix von Bootstrap nicht mehr verwenden.

0
McVenco

Dies scheint ein Fehler im Safari-Rendering zu sein, der dazu führt, dass die Spalten den Bootstrap-Container überlaufen (und damit umbrechen) (möglicherweise eine Art Rundungsfehler in Webkit?). Da Sie Bootstrap verwenden, sollten Sie in der Lage sein, das gewünschte Ergebnis ohne Verwendung von Flex zu erzielen:

<div class="row">
    <div class="col-md-4 col-sm-6 text-center">
        <div class="product">
            <img src="img.jpg" alt="" class="img-responsive">
            <h3>Name</h3>
            <p>Description</p>
        </div>
    </div>
</div>
<style>
    .product {
        /* this is to automatically center and prevent overflow
           on very narrow viewports */
        display: inline-block;
        max-width: 100%;
    }
</style>

Aber! Wenn Sie Ihr Beispiel betrachten, besteht das Problem darin, dass Sie die Größe Ihrer Produktblöcke exakt beibehalten müssen. Andernfalls behält das Raster seine Form nicht bei. Eine mögliche Lösung besteht darin, .product eine feste Höhe zu geben und mit Hilfe von Medienabfragen anzupassen.

Hier ein Beispiel, das ich in Safari und anderen Browsern erstellt habe: http://codepen.io/anon/pen/PZbNMX Außerdem können Sie Stilregeln verwenden, um Bilder oder Beschreibungstext beizubehalten innerhalb einer bestimmten Größe, um die Wartung zu erleichtern.

Eine andere mögliche Lösung besteht darin, ein Skript oder ein jQuery-Plugin zu verwenden, um eine dynamischere, einheitliche Größenanpassung zu ermöglichen, aber ich bin mit dem Zeug nicht so geschickt.

Ich bin auf das gleiche Problem gestoßen, als ich versuchte, Flex und Bootstrap mit Safari zu kombinieren.

0
Basil Mohabir