Bug 242798 - Inline element with a block ::before following a floated element is cleared
Summary: Inline element with a block ::before following a floated element is cleared
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: zalan
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-07-15 07:50 PDT by Erik Bročko
Modified: 2022-08-03 08:34 PDT (History)
5 users (show)

See Also:


Attachments
Floated block followed by an inline element. (958 bytes, text/html)
2022-07-15 07:50 PDT, Erik Bročko
no flags Details
Patch (3.96 KB, patch)
2022-08-02 18:44 PDT, zalan
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Erik Bročko 2022-07-15 07:50:39 PDT
Created attachment 460925 [details]
Floated block followed by an inline element.

Elements with `float: right` followed by an inline container (set to `clear: both`) with ::before pseudo-element set to `display: block` inside it make the inline element truly cleared.

If `clear: both` is omitted, all works fine. If there is no `::before` block pseudoelement, it works fine. (Works fine = consistently with other browsers and previously observed behavior.)

Chrome, Firefox and Safari Technology Preview 142 render it the same way, with content immediately after the floated element wrapping around it. Safari Technology Preview 147+ and Safari 16.0 force the element to be cleared.

See my attached example.

I think this is because the ::before block pseudo-element gets put outside its parent inline element. I'm not sure if this is necessarily a bug. I couldn't test other versions of Safari, as they're impossible to download...
Comment 1 Radar WebKit Bug Importer 2022-07-22 07:51:14 PDT
<rdar://problem/97436662>
Comment 2 zalan 2022-08-02 14:01:16 PDT
> I think this is because the ::before block pseudo-element gets put outside
> its parent inline element. I'm not sure if this is necessarily a bug. I
> couldn't test other versions of Safari, as they're impossible to download...
Thank you for the test reduction. I think 'clear' confuses our inline layout and inflates the formatting context root's height. Looking into it now.
Comment 3 zalan 2022-08-02 18:44:46 PDT
Created attachment 461368 [details]
Patch
Comment 4 EWS 2022-08-03 08:34:43 PDT
Committed 253076@main (2c461c54b9fa): <https://commits.webkit.org/253076@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 461368 [details].