Chrome superimposes content over a float when it should not (with negative margin-top) |
||
Issue descriptionChrome Version: 71.0.3573.0 (Official Build) dev (64-bit) OS: Linux (Ubuntu 18.10) What steps will reproduce the problem? (1) Visit https://jsfiddle.net/h6k4smd0/ What is the expected result? The text shouldn't overlap the orange float. What happens instead? The text does overlap the orange float. Please use labels and text to provide additional information. There is only one block formatting context involved here, so the text should dodge the float. FWIW, here are a few possible tweaks to the testcase that shouldn't make much difference but do "fix" Chrome'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) - remove the unstyled <div> wrapper ...then Chrome changes to match the expected behavior (the text dodges to the right and doesn't overlap the orange float) Firefox and Edge give "expected results". Chrome and Safari give "Actual results" (probably due to shared lineage --> shared bugs)
,
Oct 16
Safari/WebKit version of this bug: https://bugs.webkit.org/show_bug.cgi?id=190633
,
Oct 21
,
Dec 21
I just ran into this again on https://github.com/webcompat/web-bugs/issues/22916 and reduced this testcase: http://jsfiddle.net/Lsdf8pao/ eae, would you or somebody mind testing that ^^ jsfiddle in LayoutNG (if this is believed to be fixed-in-LayoutNG)? (I believe the correct rendering is for the colorful divs to *not overlap* -- the orange div should be to the right of the gray div. That's how Firefox and Edge render it, at least. Chrome and Safari render the divs overlapping.) |
||
►
Sign in to add a comment |
||
Comment 1 by dholb...@gmail.com
, Oct 16For the record, here's the HTML from the jsfiddle: <div class="float"></div> <div class="spacer1"></div> <div> <div class="spacer2"></div> <div class="negMargin"> This text shouldn't overlap the orange float. </div> </div> And here's the styles: .float { float: left; background: orange; height: 30px; width: 50px; } .spacer1 { height: 30px; /* or you can use "clear:both" */ } .spacer2 { height: 1px; /* this just needs to have some nonzero height. */ } .negMargin { margin-top:-15px; background: lightblue; }