Closed Bug 1937954 Opened 2 months ago Closed 2 months ago

[BUG] [CSS] 'justify-self' doesn't work when there is margin set to non-auto value

Categories

(Core :: CSS Parsing and Computation, defect)

Firefox 133
defect

Tracking

()

RESOLVED DUPLICATE of bug 1920160

People

(Reporter: konieckropka, Unassigned)

Details

Attachments

(1 file)

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

  1. margin: 0;
  2. margin-left: unset;
  3. margin-right: 10%;
  4. margin-end: initial;
  5. margin-inline: revert;
  6. 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

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.

Component: Untriaged → General
Product: Firefox → Fenix

I think this belongs to CSS Parsing and Computation (and from the description of the bug, it's not specific to Android)

Component: General → CSS Parsing and Computation
Product: Fenix → Core

: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;

Ah, yeah - This was fixed 134 in Bug 1920160.
I see the expected result on 134 and 135.

Status: UNCONFIRMED → RESOLVED
Closed: 2 months ago
Duplicate of bug: 1920160
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: