flex container width smaller with symmetrical letter-spacing and whitespace nowrap on children causing wrapping
Categories
(Core :: Layout: Flexbox, defect)
Tracking
()
People
(Reporter: laurence.hey, Unassigned, NeedInfo)
References
(Depends on 1 open bug, Blocks 1 open bug)
Details
Attachments
(2 files)
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:129.0) Gecko/20100101 Firefox/129.0
Steps to reproduce:
- Set layout.css.letter-spacing.model set to 2 (the new default in Firefox Developer Edition)
- Display the following document:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<style>
.container {
display: flex;
flex-flow: row wrap;
gap: 16px;
background-color: purple;
width: max-content;
}
.child {
background-color: limegreen;
letter-spacing: 3px;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="container">
<div class="child">
Thing 1
</div>
<div class="child">
Thing 2
</div>
</div>
</body>
</html>
https://stackblitz.com/edit/stackblitz-starters-cdkzny?file=index.html
Actual results:
The container div is 3px (1 letter-spacing) smaller than when layout.css.letter-spacing.model set to 0 (the current default) causing the child divs to stack.
Expected results:
The container is sized so that the child divs are side by side.
If any one of the following are removed there is no wrapping with layout.css.letter-spacing.model set to either 0 or 2:
- letter-spacing: 3px;
- white-space: nowrap;
- The white space around the text content of the child divs (i.e. <div class="child">Thing 1</div>)
|
||
Comment 1•2 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout: Flexbox' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Comment 2•2 years ago
|
||
Thanks for the bug report!
I can reproduce the linewrapping issue with about:config pref layout.css.letter-spacing.model set to 2 (the default in Nightly), but I cannot reproduce the issue with 0 (the default in release).
I tested Firefox 129 release on macOS 10.15 (which I think is what you're using per first line of comment 0).
Maybe there's some system-specific configuration that's required to trigger the issue with the 0 value of the pref? (e.g. particular display pixel ratio or something like that?) Not sure.
In any case, the fact that this reproduces with what-we're-hoping-to-ship-as-the-new-default-eventually (2) makes this interesting and relevant, even if the issue with 0 is not-yet-clear-how-to-reproduce.
|
|
||
Comment 3•2 years ago
|
||
|
|
||
Comment 4•2 years ago
|
||
|
|
||
Comment 5•2 years ago
|
||
(In reply to Daniel Holbert [:dholbert] from comment #2)
I can reproduce the linewrapping issue with
about:configpreflayout.css.letter-spacing.modelset to2(the default in Nightly), but I cannot reproduce the issue with0(the default in release).
[...]
In any case, the fact that this reproduces with what-we're-hoping-to-ship-as-the-new-default-eventually (2) makes this interesting and relevant, even if the issue with0is not-yet-clear-how-to-reproduce.
Ah, sorry -- re-reading comment 0 now, it sounds like your observations match my own. I had initially misread comment 0 and thought you were hitting the linewrapping when using a pref value of 0, but now I see that you were using pref value 0 as a reference that gave "good" behavior.
|
|
||
Comment 6•2 years ago
|
||
I think my testcase 2 demonstrates that this is probably just a version of bug 1907305 -- we're not trimming letter-spacing at the end of the line, at least not consistently in flex and grid when sizing the container's max-content-size vs. sizing the items individually.
Whether or not this is a version of bug 1907305, we should be sure we fix this before shipping the 2 value of the pref to release.
jfkthame, could you file a metabug to track shipping layout.css.letter-spacing.model:2 (assuming things work out), so we can use it to gather bugs like this one?
Description
•