codepen.io - Floating line break rendering mismatch (Firefox vs Chrome)

[myfonj]

URL: https://codepen.io/myf/pen/YzMYWVo

Browser / Version: Firefox 125.0
Operating System: Windows 10
Tested Another Browser: Yes Edge

Problem type: Something else
Description: Firefox vs Chrome discrepancy wrt floated line break element
Steps to Reproduce:
Another tiny little conundrum. How should <br style="float: left;"> render?

In Chrome it renders normally, same as non-styled BR.
In Firefox it renders like hidden, i.e. stops breaking lines.

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[azlata]

Thank you for reporting this issue, I was able to reproduce it. It seems that there is a discrepancy between Firefox and Chrome/Opera, as it can be observed in the screenshots.

Chrome

Firefox Nightly

Firefox Beta

Opera

Tested on:
• Browser / Version: Firefox Beta 125.0b7 (64-bit) / Chrome 123.0.6312.106 / Opera One 108.0.5067.29 / Firefox Nightly 126.0a1 (2024-04-02 / Firefox Release 124.0.2
• Operating System: Windows 10

Notes:

1. Reproducible on Firefox Beta, Release, Nightly
2. Not reproducible on Chrome/Opera.
3. Reproducible regardless of settings of Enhanced Tracking Protection

Moving to Needsdiagnosis.

[qa_14/2024]

[myfonj]

Thanks for confirming.

Btw, MRE could be just:

data:text/html,FOO<br style="float: left">BAR

As usually, seeing (not)reproducible / browsers affected in such issue feels strange, but I guess it is part of the process to mark one implementation as "wrong" and other as "right" here, right?
(Or do we have a spec telling which approach is conformant here already?)

[myfonj]

Probably related #56012 so in effect whatwg/html#2291 and whatwg/html#2298 / w3c/csswg-drafts#3026
(My random twitter poll ended up 9:7 in favour for "float should stop line breaking like in Firefox". But thanks to SelenIT_3's response there we got links to these WHATWG discussions!)

[myfonj]

FWIW, both Chrome and Firefox agree that

data:text/html,FOO<hr style="float: left">BAR

(i.e. same test sample, just with <hr> instead of <br>) stops producing a break between words and effectively joins them into one (with the HR producing a "dot" at the beginning of the line).

Yes, BR and HR are completely different beasts under the hood, but this fact is not very apparent from the outside and expecting both to react in a similar manner sounds quite reasonable.

(So maybe it's the WebKit/Chromium team that should be pinged here?)

[denschub]

Yeah, you're right in your investigations. Looking at the spec issues, this doesn't look like a simple fix, sadly. I'll close this as a duplicate, but I'll make sure our standards people have a look at this again!

[myfonj]

Fair enough, thanks!

I'll just dump here few related remarks that emerged later around at Twitter:

<br> is "magic"

It hypothetically "could be just like"

<span style="white-space: pre;">&#xA;</span>

but sadly is not. (And there are certainly good reasons for that.)

<br> and margin

Discouraged and only Firefox does this, but interesting, in:

A
<br>
B
<br style="margin: 1lh">
C.

the second BR produces extra blank lines above and below the middle "B", since it kinda acts like that span at the end of the line, or something.

<br> in Chrome accepts :content

but does not actually display it. This is super wicked:

<br style="content: '.'; display: block; margin-block: 1lh">

in Chrome actually does something: makes one blank line. Changing display to flex makes it produce two lines. So it shifts the behaviour slightly towards what Firefox does. That content part without a pseudo is a witchcraft. (Thanks Wes Bos)