flex item size computed incorrectly with ::first-letter
Categories
(Core :: Layout: Flexbox, defect)
Tracking
()
People
(Reporter: mohammed.abouzahr, Unassigned)
Details
Attachments
(2 files)
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.
Updated•4 years ago
|
Comment 1•4 years ago
|
||
Thanks for the reduced test case, Mohammed! Attaching a standlone version without column-gap.
Comment 2•4 years ago
|
||
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.
Comment 3•4 years ago
|
||
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.
Updated•4 years ago
|
Updated•4 years ago
|
Comment 4•4 years ago
|
||
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?
Comment 5•4 years ago
|
||
Dupe of long-standing bug 385615, I think. See bug 385615 comment 23 and bug 362880 comment 2.
Comment 6•4 years ago
•
|
||
(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.]
Updated•4 years ago
|
Description
•