226765 2021-06-08 04:48:41 -0700 Dynamically inserted inline-level element causes the adjacent float to shift down 2022-12-16 07:59:28 -0800 1 1 1 Unclassified WebKit Layout and Rendering Safari 14 Mac (Intel) macOS 10.15 NEW InRadar P2 Normal --- 1 kzakiss zalan ahmad.saleem792 bfulgham koivisto simon.fraser webkit-bug-importer zalan oldest_to_newest 1767740 0 430831 kzakiss 2021-06-08 04:48:41 -0700 Created attachment 430831 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. 1769750 1 webkit-bug-importer 2021-06-15 04:49:15 -0700 <rdar://problem/79335914> 1919864 2 ahmad.saleem792 2022-12-16 02:34:37 -0800 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! 1919911 3 zalan 2022-12-16 06:32:27 -0800 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. 430831 2021-06-08 04:48:41 -0700 2021-06-08 04:48:41 -0700 Demonstration shifting-float.html text/html 888 kzakiss PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0i VVRGLTgiPgogIDxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lk dGgsIGluaXRpYWwtc2NhbGU9MS4wIj4KICA8dGl0bGU+RHluYW1pY2FsbHkgaW5zZXJ0ZWQgaW5s aW5lLWxldmVsIGVsZW1lbnQgY2F1c2VzIHRoZSBhZGphY2VudCBmbG9hdCB0byBzaGlmdCBkb3du PC90aXRsZT4KICA8c3R5bGU+CiAgI2NvbnRhaW5lciB7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiBs aWdodGdyYXk7CiAgICBtYXgtd2lkdGg6IDQwMHB4OwogICAgd2lkdGg6IDEwMCU7CiAgICBtYXJn aW46IGF1dG87CiAgfQoKICAjY29udGFpbmVyOjphZnRlciB7CiAgICBjb250ZW50OiAnJzsKICAg IGRpc3BsYXk6IGJsb2NrOwogICAgY2xlYXI6IGJvdGg7CiAgfQoKICAjc3RhdGljIHsKICAgIGJh Y2tncm91bmQtY29sb3I6IHJlZDsKICAgIHBhZGRpbmc6IDAgMTJweDsKICB9CgogICNmbG9hdGlu ZyB7CiAgICBmbG9hdDogcmlnaHQ7CiAgICBiYWNrZ3JvdW5kLWNvbG9yOiBibHVlOwogICAgcGFk ZGluZzogMCAxMnB4OwogIH0KICA8L3N0eWxlPgo8L2hlYWQ+Cjxib2R5PgogIDxkaXYgaWQ9ImNv bnRhaW5lciI+CiAgICA8c3BhbiBpZD0iZmxvYXRpbmciPkZsb2F0PC9zcGFuPgogIDwvZGl2Pgog IDxzY3JpcHQ+CiAgICBzZXRUaW1lb3V0KGZ1bmN0aW9uKCkgewogICAgICBkb2N1bWVudC5xdWVy eVNlbGVjdG9yKCcjY29udGFpbmVyJykuaW5zZXJ0QWRqYWNlbnRIVE1MKCdhZnRlcmJlZ2luJywg JzxzcGFuIGlkPSJzdGF0aWMiPklubGluZSAmbHQ7c3BhbiZndDs8L3NwYW4+Jyk7CiAgICB9LCAx MDAwKTsKICA8L3NjcmlwdD4KPC9ib2R5Pgo8L2h0bWw+