<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Flexbox: Pseudo elements with `display: table` (ex. clearfix) effect some calculations"
href="https://bugs.webkit.org/show_bug.cgi?id=159575">159575</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Flexbox: Pseudo elements with `display: table` (ex. clearfix) effect some calculations
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari 9
</td>
</tr>
<tr>
<th>Hardware</th>
<td>All
</td>
</tr>
<tr>
<th>OS</th>
<td>All
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>CSS
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>webkitbugs@rmnet.com
</td>
</tr></table>
<p>
<div>
<pre>When ::before and ::after pseudo elements (with properties that should make them invisible) are applied to an element that also has `display: flex`, Safari includes those pseudo elements in the flexbox calculations.
The most common case would be applying a clearfix to the container:
.clear-fix:before,
.clear-fix:after {
content: "";
display: table;
}
.clear-fix:after {
clear: both;
}
Result:
- Children elements, that are *specifically* set to flex and grow behave in an unexpected way because Safari is actually applying various flexbox calculations to those *actual* elements AND the pseudo elements.
- IOW: If there are 3x child elements, Safari calculates some (but not all) flexbox properties for 5 elements (3 + ::before, ::after).
- In some cases (depending on the flex attributes for container and children) this results in a 1-3px gap between the edge of the container and the *actual* (non-pseudo) first or last element.
- In other cases, where there are two *actual* elements that should each occupy 50% of the container's width, the second child will be pushed down to the next line (since that 1px, from the clearfix, will cause the second element, at 50%, to not have enough room on the same line).
This person (Dan Bissonnet) did a very nice write-up and test case:
<a href="http://danisadesigner.com/blog/flexbox-clear-fix-pseudo-elements/">http://danisadesigner.com/blog/flexbox-clear-fix-pseudo-elements/</a>
<a href="http://codepen.io/dbisso/full/cCBpn">http://codepen.io/dbisso/full/cCBpn</a>
However, his solution (flex-basis: 0; order: 1), didn't work in the specific case where I originally found it.
I found 3x alternate workarounds (properties added to ::before and ::after):
- `display: none;` <-- My chosen solution
- `position: absolute`
- `display: flex`
`visibility: collapse` (which is flexbox specific and supposed to be similar and `visibility: hidden`) is NOT a workaround.
See:
<a href="http://www.w3.org/TR/css-flexbox-1/#visibility-collapse">http://www.w3.org/TR/css-flexbox-1/#visibility-collapse</a>
Luckily, in my case, I didn't really need those clearfixes, so `display: none` (or, if you can, removing the clearfix entirely) works well. But if you need them, I'm not sure any of these workarounds are complete.
I'm not sure if you'll classify this as a bug because I can see a case for this being the intended behavior OR chalk it up to the flexbox spec not being specific enough for a case like this (child element = `display: table`).
However, I'm reporting because I don't know the definitive answer AND it's *not* an issue in Chrome (51.0.2704.103) or Firefox (47.0.1). It seems to correctly collapse or not *count* the pseudo elements as flexbox children.
Possibly related reports:
<a class="bz_bug_link
bz_status_NEW "
title="NEW - Flexbox with absolutely positioned ::after pseudo element incorrectly computes text length"
href="show_bug.cgi?id=152783">https://bugs.webkit.org/show_bug.cgi?id=152783</a>
<a class="bz_bug_link
bz_status_NEW "
title="NEW - ::first-line doesn't skip flex/grid elements"
href="show_bug.cgi?id=140543">https://bugs.webkit.org/show_bug.cgi?id=140543</a></pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>