Properties `inset` and `left` with `right` have bug
Categories
(Core :: Layout, defect)
Tracking
()
People
(Reporter: phpcoder2022, Unassigned)
Details
Attachments
(1 file)
|
3.21 KB,
text/html
|
Details |
User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/114.0
Steps to reproduce:
Hello. Properties inset and left with right have bug. Button element with position: absolute not fit to parent size although pseudoelements work normal. Only property width rescue. All works normal in Chromium.
|
||
Comment 1•11 months ago
|
||
Moving this to Core > Layout component, to allow our engineers to examine it more closely. If this is not the right component, please move it to a more appropriate one. Thanks!
|
||
Comment 2•11 months ago
|
||
STR to trigger the issue:
- Hover any of the top three cards in the reporter's attached testcase.
EXPECTED RESULTS:
Card changes color.
ACTUAL RESULTS:
Card doesn't change color.
The testcase here is using an absolutely positioned <button> element with left:0 and right:0, and it's essentially testing "What does it mean for an absolutely positioned element to have left:0; right:0; width: auto.
Firefox is following the rules for replaced elements (like <img>) which resolve the width:auto to the image's intrinsic width (possibly adjusted if it's got an explicit height and an intrinsic aspect ratio).
Other browsers do seem to treat form fields using the non-replaced approach (like ::before and div, though). Form fields are notoriously in a bit of a "gray area" regarding whether they behave as replaced elements or non-replaced elements. But maybe we need to align with other browsers for interop here.
Reporter: if you're looking to work around this issue in a production website, you might have some success by using a div instead of a button; or, you could wrap your button in a div and have the div be the absolutely-positioned-thing with left:0;right:0, and make your button fill the div by giving it width:100%; height: 100%; box-sizing: border-box or other techniques.
|
|
||
Comment 3•11 months ago
|
||
Ah, this is essentially the same issue that's already covered by bug 1740580. We are indeed wrong here, based on the spec resolution referenced there (and issue is specific to buttons and other form-components, which we're sizing intrinsically like img elements with image data, when we should be sizing them with "stretch" behavior like divs and other elements).
Description
•