Open Bug 2030840 Opened 1 month ago Updated 21 days ago

Wrong max-content width of "whitespace <span>&shy;</span> whitespace", causing word-wrapping in flex / inline-block

Categories

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

Product:
Core
Component:
Layout: Text and Fonts
Version:
Firefox 150
Type:
defect

Tracking

()

Tracking Flags:
Tracking Status
firefox-esr115 --- wontfix
firefox-esr140 --- wontfix
firefox149 --- wontfix
firefox150 --- wontfix
firefox151 --- wontfix

People

(Reporter: syrrim0, Unassigned)

References

(Regression)

Details

(Keywords: regression)

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:150.0) Gecko/20100101 Firefox/150.0

Steps to reproduce:

Minimal example:
data:text/html,<body style=display:flex;><div>x <span>­</span> y

Actual results:

y wraps to the next line

Expected results:

all should be on one line.

The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Component: Untriaged → Layout
Product: Firefox → Core

I can't reproduce this off-hand with your test-case, nor with something like:

<!DOCTYPE html>
<body style="display: flex">x <span>&shy;</span> y</body>

(with or without the doctype)

Any interesting font settings or something that could affect this? Can you attach an HTML page that reproduces the issue for you? Does it happen on a clean profile?

Flags: needinfo?(syrrim0)

I just noticed that the link I submitted wasn't reproduced correctly since the bugzilla formatting ate the &shy;. A correct data link would be

data:text/html,<body style=display:flex;><div>x <span>&shy;</span> y

Your demo doesn't work because you missed the <div>. With the div I can reproduce it in a clean profile and on the android version.

Flags: needinfo?(syrrim0)

Ah, I see, so it's about max-content. Simpler test-cases:

data:text/html,<div style="display: inline-block">x <span>&shy;</span> y

Or:

data:text/html,<div style="width: max-content">x <span>&shy;</span> y

It seems like a really old regression:

https://hg-edge.mozilla.org/mozilla-central/pushloghtml?fromchange=2963cf6be7f830c0d2155e2968cfc53585868a76&tochange=97d6f73643940256c0eb61e384c49bf6f6c49847

There's a ton of stuff going on in there but I'm going to bet it was bug 1316482.

Severity: -- → S3
Status: UNCONFIRMED → NEW
Component: Layout → Layout: Text and Fonts
Ever confirmed: true
Priority: -- → P3
Summary: Last word wraps when &shy; in span between spaces in div in flex. → Wrong max-content width of "whitespace <span>&shy;</span> whitespace", causing word-wrapping in flex / inline-block

Looks also suspiciously similar to bug 1216608...

Keywords: regression
Regressed by: 1316482
See Also: → 1216608

Set release status flags based on info from the regressing bug 1316482

status-firefox149: --- → affected
status-firefox150: --- → affected
status-firefox151: --- → affected
status-firefox-esr140: --- → affected

Also reminds me of bug 2021980. The example there (involving &#xD;) is slightly different, but I suspect the underlying causes may be related.

See Also: → 2021980
You need to log in before you can comment on or make changes to this bug.