Bug 190633 – WebKit superimposes content over a float when it should not (with negative margin-top)

• Status: NEW
• Component: Layout and Rendering

[Daniel Holbert]

(reporting in version:safari 12 because that's the latest version I've got handy. but I'll bet this affects trunk as well)

STR:
 1. Visit https://jsfiddle.net/h6k4smd0/

EXPECTED RESULTS:
Text shouldn't overlap orange float.

ACTUAL RESULTS:
Text does overlap orange float.

Chrome and Safari give ACTUAL RESULTS (presumably due to shared lineage --> shared bugs). Firefox and Edge give EXPECTED RESULTS.


Notes:
There is only one block formatting context involved here, so the text should dodge the float because they're in the same BFC.

FWIW, here are a few possible tweaks to the testcase that have no reason to make much difference, but do "fix" Safari's rendering (which are further indication that something's wrong here). If you do any of the following:
 - give the float a border
 - remove .spacer2 (or give it 0 height)
...then Safari changes to match the expected behavior (the text dodges to the right and doesn't overlap the orange float)

Chrome version of this bug: https://bugs.chromium.org/p/chromium/issues/detail?id=895962

[Radar WebKit Bug Importer]

<rdar://problem/45342251>

[Ahmad Saleem]

I am able to reproduce this bug in Safari 16.1 and Safari Technology Preview 156 and Orange is behind text while in case of Firefox Nightly 108 and Chrome Canary 109, the text is pushed to make space of Orange rather than showing it in the background.

Just wanted to share updated testing results. Thanks!

[zalan]

Intrusive floats are supposed to be passed in to the IFC, but I don't see any float coming from the parent BFC (hence the overlapping inline content).