Bugzilla

Interesting.... so the discrepancy is clearly a bug (note that if you zoom in/out on the testcase, triggering a full reflow, it "fixes" itself to match the reference) where we're failing to reflow sufficiently in response to the style change.

As for what the correct rendering should be: I'm inclined to think Firefox is right to wrap onto two lines, though I haven't trawled through specs to see if this is clearly specified anywhere. The codepen at https://codepen.io/jfkthame/pen/xxrBEro shows a distinct lack of interop in a related example:

- Firefox and Safari agree about the initial rendering of both columns, while Chrome is quite different
- If you click the button to make the red `span`s transparent, Safari unexpected changes the layout of the left column
- Using the second button to add CSS outlines to the `span`s (which should not affect layout at all) restores the expected layout in Safari

I think Chrome is wrong to totally ignore the empty `span` when line-wrapping -- as the codepen shows, this happens even when it has visible width of its own (due to padding), it's not just about the margin -- and Safari is clearly wrong to somehow "optimize away" the `span` only when it has no visible rendering; it's still equally present for layout purposes.

Interesting.... so the discrepancy is clearly a bug (note that if you zoom in/out on the testcase, triggering a full reflow, it "fixes" itself to match the reference) where we're failing to reflow sufficiently in response to the style change.

As for what the correct rendering should be: I'm inclined to think Firefox is right to wrap onto two lines, though I haven't trawled through specs to see if this is clearly specified anywhere. The codepen at https://codepen.io/jfkthame/pen/xxrBEro shows a distinct lack of interop in a related example:

- Firefox and Safari agree about the initial rendering of both columns, while Chrome is quite different
- If you click the button to make the red `span`s transparent, Safari unexpectedly changes the layout of the left column
- Using the second button to add CSS outlines to the `span`s (which should not affect layout at all) restores the expected layout in Safari

I think Chrome is wrong to totally ignore the empty `span` when line-wrapping -- as the codepen shows, this happens even when it has visible width of its own (due to padding), it's not just about the margin -- and Safari is clearly wrong to somehow "optimize away" the `span` only when it has no visible rendering; it's still equally present for layout purposes.