LibWeb: Material UI full-width input field has its label missing
Material UI's fullWidth input field isn't displaying the label text correctly.
Chrome:
Ladybird:
Here is a trimmed & static reproducible example where the fullWidth text shows in Chrome, but not Ladybird:
<!DOCTYPE html><style>
.outer {
display: flex;
}
.middle {
width: 500px;
}
.inner {
position: relative;
width: 100%;
}
label {
position: absolute;
overflow: hidden;
max-width: 100%;
}
</style>
<body><div class="outer"><div class="middle"><div class="inner"><label>fullWidth</label>The reason the label is gone is because the width of label has been determined to be 0px, and overflow: hidden is trimming it all away. I've tried getting to the bottom of this issue, but I've struggled to wrap my brain around how the FFC is participating. As far as I can tell, the following steps are leading to the issue:
.outerlays out.middle, and calculates min/max content sizes usingcalculate_{min,max}_content_widthcalculate_{min,max}_content_widthsets.middle's width to be indefinite.- Since
.middle's width is (temporarily) indefinite,.inner's width isn't set to 500px like it is if.outeris a BFC. .inner's width is calculated to be 0pxlabelis laid out using.inneras its containing box (due to the position styles I think), which has a width of 0px.- Since
label's containing block is 0px, themax-widthstyle trims its width to also be 0px. labeldecides its width is now "definite" at 0px- A later pass (perhaps by the FFC) re-calculates
.inner's width to be 500px. labelis re-laid out, but since its width has already been determined to be "definite", it does not re-calculate using the newmax-width.
IF the above steps are accurate, I'm also struggling to understand what the correct solution here is. Should the width of .inner never be calculated to be 0px (step 4)? Should label always re-calculate width (step 9)?
How does funding with Polar work?
Pay now to fund the work behind this issue.
Get updates on progress being made.
Maintainer is rewarded once the issue is completed.
Backer
You're funding impactful open source efforts
Contributor
You want to contribute to this effort
Maintainer
You want to get funding like this too