Closed Bug 1653666 Opened 4 years ago Closed 4 years ago

flex item size computed incorrectly with ::first-letter

Categories

(Core :: Layout: Flexbox, defect)

defect

Tracking

()

RESOLVED DUPLICATE of bug 385615

People

(Reporter: mohammed.abouzahr, Unassigned)

Details

Attachments

(2 files)

Attached image firefox_flex_bug.png

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

Steps to reproduce:

Create a flex box whose items are words with larger first letters.

MWE: https://codepen.io/momo-sa/pen/wvMQKmy

CSS:
.title {
display: flex;
flex-flow: row wrap;
justify-content: start;
column-gap: 0.5em;
}

.title-word::first-letter {
font-size: xx-large;
}

HTML:
<div class="title">
<div class="title-word">
FirstWord
</div>
<div class="title-word">
SecondWord
</div>
</div>

Note that the column-gap specification isn't required to recreate the issue, but I wanted to be explicit about the property that isn't being respected with this error.

Actual results:

On initial load, there's a huge gap between the words (flexbox items). The size of the gap is proportional to the size difference of the first letter. That is, there's a smaller gap when the first letter is large than when it's xx-large.

If I uncheck and recheck the column-gap property of the flex element using the dev tools, the gap appears as it should.

Expected results:

The column gap between the flex items should be as specified.

Component: Untriaged → Layout: Columns
Product: Firefox → Core
Attached file reporter's testcase

Thanks for the reduced test case, Mohammed! Attaching a standlone version without column-gap.

My guess is that we're doing the measuring reflow of the items incorrectly. If I drop the ::first-letter from the test, then it makes it clear that the items take up space as if the font-size: xxlarge applied to the whole element, not just the first letter.

Status: UNCONFIRMED → NEW
Component: Layout: Columns → Layout: Flexbox
Ever confirmed: true

I don't think this is a regression (or a recent one); I can reproduce with that test case at least back to Firefox 37.

Summary: Flex column-gap not respected on initial load with text items have larger first letter → flex item size computed incorrectly with ::first-letter
Version: 78 Branch → Trunk

And indeed it is the case. The first time reflowing the flex item, the frame tree looks like this:

Block(div)(1)@7fd8c5351d50 parent=7fd8c5351ca0 next=7fd8c5352050 (0,0,0,0) [content=7fd8bf803b80] [cs=7fd8c7df3798] <
  line@7fd8c5352000 count=1 state=inline,dirty,prevmarginclean,not-impacted,not-wrapped,before:nobr,after:nobr[0x1] (0,0,0,0) <
    Letter(div)(1)@7fd8c5351f58 parent=7fd8c5351d50 (0,0,0,0) [content=7fd8bf803b80] [cs=7fd8c7df3c48:first-letter] <
      Text(0)"\n    FirstWord\n  "@7fd8c5351eb8 parent=7fd8c5351f58 (0,0,0,0) [content=7fd8bf805200] [cs=7fd8c7df3d38:-moz-text] [run=7fd8c7ea3e80][0,17,T] 
    >
  >
>

and the second time, after twiddling the style:

Block(div)(1)@7fd8c5351d50 parent=7fd8c5351ca0 next=7fd8c5352050 (0,0,9767,2280) [content=7fd8bf803b80] [cs=7fd8c7df3798] <
  line@7fd8c5352000 count=2 state=inline,clean,prevmarginclean,not-impacted,wrapped,before:nobr,after:nobr[0x120] (0,0,5551,2280) vis-overflow=(0,0,5856,2280) scr-overflow=(0,0,5551,2280) <
    Letter(div)(1)@7fd8c5351f58 parent=7fd8c5351d50 next=7fd8c53523b8 next-in-flow=7fd8c53523b8 (0,0,1332,2280) [content=7fd8bf803b80] [cs=7fd8c7df3c48:first-letter] <
      Text(0)"\n    F"@7fd8c5351eb8 parent=7fd8c5351f58 next-in-flow=7fd8c5352300 (0,0,1332,2280) [content=7fd8bf805200] [cs=7fd8c7df3d38:-moz-text] [run=7fd8c534fb80][0,6,F] 
    >
    Letter(div)(1)@7fd8c53523b8 parent=7fd8c5351d50 prev-in-flow=7fd8c5351f58 (1332,900,4219,1140) vis-overflow=(0,0,4524,1140) scr-overflow=(0,0,4219,1140) [content=7fd8bf803b80] [cs=7fd8c7df7208:-moz-first-letter-continuation] <
      Text(0)"irstWord\n  "@7fd8c5352300 parent=7fd8c53523b8 prev-in-flow=7fd8c5351eb8 (0,0,4219,1140) vis-overflow=(0,0,4524,1140) [content=7fd8bf805200] [cs=7fd8c7df3b58:-moz-text] [run=7fd8c7ea3e80][6,11,T] 
    >
  >
>

Emilio, you've looked at ::first-letter a bit: can you tell why we're not reflowing the Letter frame's contents properly here?

Severity: -- → S3
Flags: needinfo?(emilio)

Dupe of long-standing bug 385615, I think. See bug 385615 comment 23 and bug 362880 comment 2.

Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → DUPLICATE

(I'll leave open the ni=emilio in case he wants to add anything, but I think comment 5 mostly answers comment 4.)
[edit: oops, I cleared it. --> adding it back.]

Flags: needinfo?(emilio)
Flags: needinfo?(emilio)

Yes, not much more to add :)

Flags: needinfo?(emilio)
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: