1943522 - Symmetrical letter-spacing miscomputes intrinsic sizing of flex items

Status: NEW

(Core :: Layout: Block and Inline, defect, P3)

Description

[Kamil Pešek]

Attachment: Flex bug.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0

Steps to reproduce:

I am very curious why I can't find any information about this, because it's "quite" big, I would say.

Few versions ago (not sure how many, but I would say 4-5 major versions, maybe 130?), Firefox Developer! Edition started wrapping some of the flex elements incorrectly. What's strange, "normal" Firefox does NOT do that.

Yesterday, I found out that if I have element which is

.icon {
display: inline-flex;
}

it shows bad flex value.

At first, I noticed it because Firefox Developer Edition started wrapping some of my elements even though there is a space for them.

Actual results:

When I check Computed it says

display: flex;
Best Match .icon >inline-flex

Expected results:

Element should have display: inline-flex; value.

Comment 1

[BugBot [:suhaib / :marco]]

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

Comment 2

[Emilio Cobos Álvarez [:emilio]]

The <button> there seems like a flex container (according to the "flex" bubble in your screenshot). If so, flex items always get blockified. This is the case on all browsers, too, see:

<!doctype html>
<button style="display: flex;"><div style="display: inline-flex">inline-flex</div></button>
<script>document.write(getComputedStyle(document.querySelector("div")).display)</script>

All browsers write flex under the button. That said if you can attach a test-case that behaves differently in Firefox developer edition vs. regular firefox (or other browsers) I'd be happy to take a look.

Comment 3

[Emilio Cobos Álvarez [:emilio]]

That is defined in https://drafts.csswg.org/css-flexbox/#flex-items:

If the computed display value of an element’s nearest ancestor element (skipping display:contents ancestors) is flex or inline-flex, the element’s own display value is blockified. (See CSS2.1§9.7 [CSS2] and CSS Display 3 § 2.7 Automatic Box Type Transformations for details on this type of display value conversion.)

Comment 4

[Jáchym Kellar]

I have the same issue. But what I've found out so far is that it's not directly related only to flex wrapping. I put together minimal html/css to reproduce this error:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .d-flex {
                display: flex;
            }
            a {
                display: block;
            }
            .item {
                letter-spacing: 1px;
            }
            .item:first-child a {
                white-space: nowrap;
            }
            </style>
    </head>
    <body>
        <div class="d-flex">
            <div class="d-flex">
                <div class="item">
                    <a href="">
                        First item
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        Second item
                    </a>
                </div>
                <div class="item">
                    <a href="">
                        Third item
                    </a>
                </div>
            </div>
        </div>
    </body>
</html>

There must be 2 levels of elements with display: flex and inside, individual items with links that have display: block, with one of these links having white-space: nowrap (it doesn't have to be :first-child). But importantly, items (or any of its parents, e.g. <body>) must have letter-spacing set. In this case, text in items that do not have white-space: nowrap; will be split across multiple lines (even if there is enough space for the text to be on one line). And this only happens in Firefox Developer Edition, NOT in "normal" Firefox.

This seems like a very specific issue, but the structure of my example is the same as the Bootstrap navbar containing a dropdown link (https://getbootstrap.com/docs/5.3/components/navbar/#nav). All you have to do to reproduce this behavior is to add letter-spacing (and have multi-word menu items).

See the attachments comparing the normal and developer Firefox versions.
Normal Firefox: 134.0.2
Developer Edition Firefox: 135.0b8
(Windows NT 10.0; Win64; x64; rv:135.0)

Comment 5

[Jáchym Kellar]

Attachment: example-developer-edition.png

Comment 6

[Jáchym Kellar]

Attachment: example-normal.png

Comment 7

[Emilio Cobos Álvarez [:emilio]]

Attachment: Test-case from above.

Comment 8

[Emilio Cobos Álvarez [:emilio]]

Ah, thanks for the test-case, that's super useful.

So it doesn't have to do with the blockification, but about whether we have the new letter-spacing model enabled or not. This is a regression from bug 1892262.

Comment 9

[BugBot [:suhaib / :marco]]

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

Comment 10

[BugBot [:suhaib / :marco]]

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

Comment 11

[Jonathan Kew [:jfkthame]]

The symmetrical letter-spacing option is preffed-off for late-Beta and Release builds, so this shouldn't affect Release-channel users. (Obviously we'll need to resolve it before we can consider shipping that feature.)