1849061 - Vertical spacing has disappeared

Status: NEW

(Core :: Layout: Text and Fonts, defect)

Description

[Šime Vidas]

Attachment: Screenshot of blog post in Firefox Nightly

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/118.0

Steps to reproduce:

1. Navigate to this blog post https://blog.chromium.org/2023/08/towards-https-by-default.html

Actual results:

There is no vertical space between the headings and paragraphs in the article (see screenshot).

Expected results:

In Firefox stable, and in Chrome and Safari, there is vertical spacing in these cases.

Comment 1

[Timea Zsoldos [:tzsoldos], Desktop QA]

Hello, thank you for the bug report!
I have tested your issue on the latest Nightly build Firefox 118.0a1 (2023-08-16) and could not reproduce it using macOS 10.15 and Windows 10.
If the issue is still reproducible on your end, can you please retest this using the latest Nightly build (https://nightly.mozilla.org/) using a new clean Firefox profile (https://goo.gl/AWo6h8) to eliminate the potential causes?
Also please attach the about:support here (go to about:support, click on "Copy test to clipboard" and paste it here).
Moving the Component to ‘Layout: Text and Fonts’. Please change if there’s a better fit, thank you.

Comment 2

[Šime Vidas]

Attachment: Minimal test page

Comment 3

[Šime Vidas]

I have created a minimal test page. See “minimal test page” in the attachments above. On the test page, there is a <br> elmeent between two <p> elements. The CSS is this:

p {
    margin: 0;
}

br {
    content: ' ';
    display: block;
    padding: 4px;
}

In Chrome and Safari, there is a one-line space between the paragraphs. In Firefox (both stable and Nightly), there is no space. I have tested in Firefox stable in troubleshoot mode. I’ve added my troubleshooting information in an attachment.

Comment 4

[Šime Vidas]

Attachment: Troubleshooting information

Comment 5

[Šime Vidas]

I’ve checked the minimal test page in Firefox, Chrome, and Safari. Browsers are behaving differently. (Try unchecking the individual CSS declarations via devtools.) The behaviors are not interoperable. It might be worth finding out which browser behaves correctly, or at lest the most correct.

Comment 6

[Timea Zsoldos [:tzsoldos], Desktop QA]

Tested with the minimal test page on Firefox 116.0.2 and latest nightly 118.0a1 using macOS 15, reproducing the issue, therefor I change the bug status to "new".

Comment 7

[Boris Chiou [:boris]]

Looks like the line wrap (in <ul>) doesn't work in Webkit and Gecko (i.e. it works only on Blink). I suspect there are something wrong on the line-height together with margin-bottom style. Perhaps there is a bug on the front-end of this Chromium page, or perhaps we didn't support some selectors or properties?

Comment 8

[Boris Chiou [:boris]]

After commenting out white-space: pre, we start to have line wrapping. Per MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/white-space), it shouldn't have a newline. Perhaps Blink has bugs when using it in <li>.

Not sure if it is a Gecko bug because looks like we are correct.

Comment 9

[Boris Chiou [:boris]]

Anyway, we need a reduced testcase for this <ul> block.