I've encountered an unusual issue while working on a library I'm developing. The problem can be traced back to the following code snippet:
<html>
<body>
<div style="position: absolute; left: 200px;">
<div style="position: absolute; left: 0px; top: 0px">
Hello some text.
</div>
<div style="position: absolute; left: -50px; top: 50px">
Hello some text.
</div>
<div style="position: absolute; left: -100px; top: 100px">
Hello some text.
</div>
<div style="position: absolute; left: -150px; top: 150px">
Hello some text.
</div>
<div style="position: absolute; left: -200px; top: 200px">
Hello some text.
</div>
</div>
</body>
</html>
The concept here is quite simple: we have the same text within various div elements placed differently. The only difference between them is the positioning. One would expect all five texts to appear identical, whether in a single line or split into multiple lines. However, the divs positioned to the left do not wrap text, whereas the ones towards the right do.
This behavior is consistent across Chrome 83, Firefox 77, and Edge 83.
The issue seems to stem from the negative left values, as when these are removed, the display remains consistent (though this adjustment is not feasible in the actual application due to how those offsets are determined).
<html>
<body>
<div style="position: absolute; left: 0px;">
<div style="position: absolute; left: 200px; top: 0px">
Hello some text.
</div>
<div style="position: absolute; left: 150px; top: 50px">
Hello some text.
</div>
<div style="position: absolute; left: 100px; top: 100px">
Hello some text.
</div>
<div style="position: absolute; left: 50px; top: 150px">
Hello some text.
</div>
<div style="position: absolute; left: 0px; top: 200px">
Hello some text.
</div>
</div>
</body>
</html>
Is this behavior a bug present in all three browsers? Or is there some logical explanation for it?
Current rendering: https://i.sstatic.net/ZFMPp.png
Expected rendering: https://i.sstatic.net/zDGlV.png