1999100 - Allow replaced elements to have overflow (was: Overflow: visible / initial behaves differently in Firefox compared to Chrome on images)

Status: RESOLVED FIXED

(Core :: Layout, defect, P3)

Description

[Paul Rhomberg]

Attachment: Bildschirmfoto 2025-11-08 um 17.07.19.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:144.0) Gecko/20100101 Firefox/144.0

Steps to reproduce:

See example code: https://codepen.io/therealpaulplay/pen/JoGQogd

CSS: .image { border-radius: 100%; height: 100px; width: 100px; position: absolute; top: 100px; left: 100px; object-fit: cover; overflow: unset; }

HTML: <img src="https://picsum.photos/id/237/200/300" class="image" />

Actual results:

The image overflows (appears rectangular) on Chrome, but is circular on Firefox. See images.

Expected results:

As discussed in https://issues.chromium.org/issues/458410324, Firefox is not adhering to the standard here

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:jwatt, could you have a look please?

For more information, please visit BugBot documentation.

Comment 2

[Emilio Cobos Álvarez [:emilio]]

That's been the long-standing HTML replaced element behavior FWIW.

This is because of this chunk of code. It'd be a matter of removing it and seeing what breaks? If Chrome does it hopefully not too much.

Ah, actually chrome has UA stylesheet stuff for replaced elements by default. But that's not in the HTML spec... Ian, is there any reason this never made it to the HTML spec? I'd support adding it.

I'll attach a work-in-progress and see what breaks on automation.

Comment 3

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1999100 - Don't clip overflow by default on replaced images. r=#layout

Comment 4

[Ian Kilpatrick [:iank]]

I only did some passing cleanup which is why I'm on the blame.
But it looks like its defined as a monkey patch in a CSS Spec:
https://drafts.csswg.org/css-overflow-4/#overflow-control

Resolved in:
https://github.com/w3c/csswg-drafts/issues/7144

Comment 5

[Mathew Hodson]

Is this the same as bug 1779332?

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/c95e29f3587b
https://hg.mozilla.org/integration/autoland/rev/6152ad973a65
Don't clip overflow by default on replaced images. r=jwatt

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/df1dba19327e
https://hg.mozilla.org/integration/autoland/rev/350f32aa5b1f
Revert "Bug 1999100 - Don't clip overflow by default on replaced images. r=jwatt" for causing multiple failures

Comment 8

[Sandor Molnar[:smolnar]]

Backed out for causing multiple failures

Backout link: https://hg-edge.mozilla.org/integration/autoland/rev/350f32aa5b1f2f5a8e85cbece273fa5da4777618

Push with failures

Failure log WR

Failure log WPT

Failure log crashtest

Failure log reftest

Comment 9

[Emilio Cobos Álvarez [:emilio]]

(In reply to Sandor Molnar[:smolnar] from comment #8)

Backed out for causing multiple failures

Backout link: https://hg-edge.mozilla.org/integration/autoland/rev/350f32aa5b1f2f5a8e85cbece273fa5da4777618

Push with failures

Failure log WR
Failure log WPT

Unexpected passes, nice.

Failure log crashtest

This one is interesting. I'm not touching anything related to ASRs but I'm tweaking a bit the clipping I guess, which could cause this. Botond, do you know what the right fix for this is? This is a fairly recent crashtest that you added (bug 2000753), and that you fixed in bug 2001862, but maybe it wasn't a fully correct fix, or we need an extra tweak?

Should I go back to skip-if(debug) and file another bug for bug 2001862?

Failure log reftest

This one is fuzzy and should just be annotated, will do.

Comment 10

[Botond Ballo [:botond]]

(In reply to Emilio Cobos Álvarez [:emilio] from comment #9)

Failure log crashtest

This one is interesting. I'm not touching anything related to ASRs but I'm tweaking a bit the clipping I guess, which could cause this. Botond, do you know what the right fix for this is? This is a fairly recent crashtest that you added (bug 2000753), and that you fixed in bug 2001862, but maybe it wasn't a fully correct fix, or we need an extra tweak?

Yeah, bug 2001862 fixed several causes of Assertion failure: IsAncestor(aOne, aTwo) || IsAncestor(aTwo, aOne) that were uncovered by bug 1730749, but a few others are known to remain (as e.g. found by the fuzzer in bug 2000312).

It's quite plausible that your changes caused the testcase to start hitting one of the remaining causes.

Should I go back to skip-if(debug) and file another bug for bug 2001862?

Yeah, I think that's fine -- thanks!

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/ab74c24e55cc
https://hg.mozilla.org/integration/autoland/rev/0b62ae6eb4a1
Don't clip overflow by default on replaced images. r=jwatt

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/29933f495e98
https://hg.mozilla.org/integration/autoland/rev/74e1c53328ae
Revert "Bug 1999100 - Don't clip overflow by default on replaced images. r=jwatt" for causing wpt failures in multicol-on-broken-image-alt-text.html.

Comment 13

[Serban Stanca [:SerbanS]]

Reverted this because it was causing wpt failures in multicol-on-broken-image-alt-text.html.

• Revert link
• Push with failures
• Failure Log
• Failure line: TEST-UNEXPECTED-FAIL | /css/css-multicol/multicol-on-broken-image-alt-text.html | Testing http://web-platform.test:8000/css/css-multicol/multicol-on-broken-image-alt-text.html == http://web-platform.test:8000/css/reference/ref-filled-green-100px-square.xht

Also please check these ones and these ones.

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/cb259a99960b
https://hg.mozilla.org/integration/autoland/rev/e81fe51adc7c
Don't clip overflow by default on replaced images. r=jwatt

Comment 15

[amarc]

https://hg.mozilla.org/mozilla-central/rev/e81fe51adc7c

Comment 17

[Sebastian Zartner [:sebo]]

This needs to be documented at least on https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow and the related longhands, possibly also other places.

Sebastian

Comment 18

[Hamish Willee]

FF148 MDN work for this can be tracked in https://github.com/mdn/content/issues/42744

As I understand this,

• prior to this addition FF did not respect overflow (or -x, -y longhand) for replaced elements. Therefore they would always be clipped to their bounding container ("hidden") irrespective of the value.
  Were other aspects of the overflow "obeyed" for replaced elements? I.e. was hidden activating at the bounding box and clip on overflow-clip-margin ?
• With this change the behaviour is the same as for other elements - i.e. overflow is visible by default to images are clipped to their bounding container.

1. So I think the main change is perhaps to add a note that replaced elements behave the same as other elements from CSS Overflow Module Level 4, but in CSS Overflow Module Level 3 the behaviour is unspecified or ambiguous, and in some implementations overflow might not be respected. Is that right?

2. Has Chrome/Safari always behaved as FF now does? (We probably have to add a compatibility note). Note, I am proposing compatibility update as per https://github.com/mdn/browser-compat-data/pull/29002

Comment 19

[Emilio Cobos Álvarez [:emilio]]

(In reply to Hamish Willee from comment #18)

1. So I think the main change is perhaps to add a note that replaced elements behave the same as other elements from CSS Overflow Module Level 4, but in CSS Overflow Module Level 3 the behaviour is unspecified or ambiguous, and in some implementations overflow might not be respected. Is that right?

Well it wasn't unspecified, it always clipped, it was only tweaked recently to allow view transitions and some other related things to work as expected.

2. Has Chrome/Safari always behaved as FF now does? (We probably have to add a compatibility note). Note, I am proposing compatibility update as per https://github.com/mdn/browser-compat-data/pull/29002

No. Chrome changed this in https://chromestatus.com/feature/5137515594383360, not sure about whether Safari does this yet or not.