[BUG] [CSS] 'justify-self' doesn't work when there is margin set to non-auto value
Categories
(Core :: CSS Parsing and Computation, defect)
Tracking
()
People
(Reporter: konieckropka, Unassigned)
Details
Attachments
(1 file)
150.76 KB,
image/png
|
Details |
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36 Edg/133.0.0.0
Steps to reproduce:
It's quite common to use reset CSS like this:
body * { margin: 0; }
If you use margin reset like abobe there will be a bug in Firefox (and Firefox only).
When you have Flexbox container element for example:
body { display: flex; }
and for <dialog open> element that should be centered both horizontally and vertically you would add:
dialog { place-self: center; }
or equivalent:
dialog { justify-self: center; align-self: center; }
When there is at least one property:
- margin
- margin-left / margin-right
- margin-inline
- margin-inline-start / margin-inline-end
set to any non "auto" value on justified element, few examples
- margin: 0;
- margin-left: unset;
- margin-right: 10%;
- margin-end: initial;
- margin-inline: revert;
- margin: auto auto auto 0;
...Firefox WILL NOT JUSTIFY element horizontally, while will still be correctly placed in the center vertically (align-self: center; works flawlessly in that case)
Any other browser will still display dialog box perfectly in the center of the container element.
The issue persist on all Firefox browsers including
- all old versions that recognize place-self | align-self CSS properties
- newest Firefox 133.0.3 Stable from December 10, 2024
- newest Firefox 133.0.3 Stable on Android
- newest Firefox Focus 133.0.3 on Android
Sandboxed Code showing the issue:
https://codesandbox.io/p/sandbox/dazzling-hellman-zz6hf5
Actual results:
The <dialog> element with style
{
justify-self: center;
margin: 0;
}
Sandboxed Code showing the issue:
https://codesandbox.io/p/sandbox/dazzling-hellman-zz6hf5
is always aligned to left, no matter what value is set to
justify-self: center | end | right | stretch (...); The property is not applied at all.
Developer Tools will grayout both:
align-self: center;
justify-self: center;
Complaining that this property "has no effect on this element since it's not a grid or flex item. Try adding display:grid, display:flex, display:inline-grid, or display:inline-flex to the element's parent."
...even though parent element IS SET to display: block;
Also Developer Tools show the same tooltip with "align-self: center" even though IT IS applied to the elementand you can even change the values to: start | end (etc...) and see that vertical alignment changes.
The only solution is to set
margin: auto; to the element for justify-self: xxx to be working.
Expected results:
The <dialog> element with style
{
justify-self: center;
margin: 0;
}
should be centered horizontally.
https://developer.mozilla.org/en-US/docs/Web/CSS/place-self
Comment 1•2 months ago
|
||
The Bugbug bot thinks this bug should belong to the 'Fenix::General' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
Comment 2•2 months ago
|
||
I think this belongs to CSS Parsing and Computation (and from the description of the bug, it's not specific to Android)
Reporter | ||
Comment 3•2 months ago
|
||
:titouan No, it is not specific to Android, as I mentioned in the description this bug occurs in all Firefox version, both mobile and PC.
Also in my description there is an error:
...even though parent element IS SET to display: block;
should be:
...even though parent element IS SET to display: block flex;
Comment 4•2 months ago
|
||
Ah, yeah - This was fixed 134 in Bug 1920160.
I see the expected result on 134 and 135.
Description
•