[Webkit-unassigned] [Bug 159575] New: Flexbox: Pseudo elements with `display: table` (ex. clearfix) effect some calculations

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=159575

            Bug ID: 159575
           Summary: Flexbox: Pseudo elements with `display: table` (ex.
                    clearfix) effect some calculations
    Classification: Unclassified
           Product: WebKit
           Version: Safari 9
          Hardware: All
                OS: All
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: webkitbugs at rmnet.com

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:
http://danisadesigner.com/blog/flexbox-clear-fix-pseudo-elements/
http://codepen.io/dbisso/full/cCBpn


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:
http://www.w3.org/TR/css-flexbox-1/#visibility-collapse

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:
https://bugs.webkit.org/show_bug.cgi?id=152783
https://bugs.webkit.org/show_bug.cgi?id=140543

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.webkit.org/pipermail/webkit-unassigned/attachments/20160708/14939c9a/attachment.html>