Dynamically inserted inline-level element causes the adjacent float to shift down

[Sarkis]

Created attachment 430831 [details]
Demonstration

The problem seems to happen only when there's a block-level element present next to the float. Removing the block-level element from the document (either dynamically or from source) resolves the problem.

The case is not only confined to dynamically inserted inline elements, but also includes out-of-flow inline elements that appear in-flow later (e.g., by changing their 'position' from 'absolute' to 'static').

Everything works just fine in case the inline element is already in flow on page load. The problem also disappears once I manually set the 'display' property of the containing element to 'none' and then revert it to its initial value.

The bug also affects Safari on iOS, thus affecting other mobile browsers as well.

Find the demonstration attached.

[Radar WebKit Bug Importer]

<rdar://problem/79335914>

[Ahmad Saleem]

I am able to reproduce this with Safari Technology Preview 160 as well where "span" and "float" are not on same line, while Chrome Canary 110 and Firefox Nightly 110 match each other. Thanks!

[zalan]

It looks like this breaks when the content is dynamically inserted. The same content works fine when no DOM mutation happens.

<style>
  #container {
  width: 500px;
  border: 1px solid black;
}

#container::after {
  content: 'after content';
  display: block;
}

#floating {
  float: right;
  background-color: blue;
}
</style>
<div id="container"><div id="floating">Float</div></div>
<script>
document.body.offsetHeight;
container.prepend(document.createTextNode("PASS if same line as float"));
</script>

produces the following render tree:

B---YGLS- --* RenderView at (0,0) size 1111x663
B-----LS- --    HTML RenderBlock at (0,0) size 1111x663
B-------- --      BODY RenderBody at (8,8) size 1095x647
B-------- --        DIV RenderBlock at (0,0) size 502x38
B---YG--- --          RenderBlock at (1,1) size 500x18
I-------- --            #text RenderText "PASS if same line as float"
B-F------ --          DIV RenderBlock at (468.11,19) size 32.89x18
I-------- --            #text RenderText "Float"
B----G--- --          <pseudo> RenderBlock at (1,19) size 500x18)
I---YG--- --            RenderText "after content"

while 
<div id="container">PASS if same line as float<div id="floating">Float</div></div>

B---YGLS- --* RenderView at (0,0) size 1111x663)
B-----LS- --    HTML RenderBlock at (0,0) size 1111x663
B-------- --      BODY RenderBody at (8,8) size 1095x647
B-------- --        DIV RenderBlock at (0,0) size 502x38
B---YG--- --          RenderBlock at (1,1) size 500x18
I-------- --            #text RenderText "PASS if same line as float"
B-F------ --            DIV RenderBlock at (467.11,0) size 32.89x18
I-------- --              #text RenderText "Float"
B----G--- --          <pseudo> RenderBlock at (1,19) size 500x18
I---YG--- --            RenderText "after content"

Note that in the first case, the "PASS if same line as float" is wrapped in an anon block container.