2055747 - Masked absolutely positioned child renders with a 1px gap at some zoom levels

Status: NEW

(Core :: Web Painting, defect)

Description

[betauploader3]

Attachment: masked-absolute-child-gap.html

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:152.0) Gecko/20100101 Firefox/152.0

Steps to reproduce:

User Agent:
Firefox Nightly 154

Expected Results:
The masked child element should render at its specified position.

When an absolutely positioned child is placed exactly at the bottom edge of its parent, no gap should appear between the two elements.

Actual Results:
In current Firefox Nightly builds, a 1px gap can appear between the parent and the masked absolutely positioned child at certain page zoom levels.

The child is positioned with top equal to the parent's height, so it should start exactly at the parent's bottom edge. However, when the child has a CSS mask and contains inline text, its painted output can appear 1px lower than expected, exposing the page background between the two elements.

Removing the CSS mask eliminates the gap. Setting an explicit line-height on the child also eliminates the gap.

This does not reproduce in Firefox 152 release or Firefox 153 beta, so it appears to be a recent regression.

Steps to Reproduce:

1. Create a new, clean Firefox profile.
2. Set layout.css.devPixelsPerPx to 1.
3. Open the attached reduced test case.
4. Zoom the page in and out.

Observed behavior:
At certain zoom levels, a 1px gap appears between the parent and the masked child. The gap disappears at other zoom levels.

Reproducible zoom levels with layout.css.devPixelsPerPx = 1:
110%
120%
125%
133%
150%
170%

With other layout.css.devPixelsPerPx values, the issue appears at different zoom levels. The exact affected zoom levels depend on the combination of browser scaling and page zoom.

Additional Notes:

• The issue reproduces on a clean profile using the attached reduced test case.
• Firefox 152 release and Firefox 153 beta do not exhibit this behavior.
• Removing the mask or setting an explicit line-height on the child avoids the issue.
• This seems related to rendering, clipping, or pixel snapping of masked absolutely positioned content with inline text under scaling.
• This may affect websites and browser UI components that align masked or custom-shaped child elements with adjacent surfaces.

Comment 1

[betauploader3]

Attachment: masked-absolute-child-gap.png

Comment 2

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

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, but is not confident enough to move the bug to that component.

Comment 3

[Alice0775 White]

Regression window:
https://hg-edge.mozilla.org/integration/autoland/pushloghtml?fromchange=2a21129467270b93cf6d9584dfece592776bfe52&tochange=35e727d8fda22f3ccfcb1e620484f041002a63c0

Comment 4

[Alice0775 White]

And regression window with layout.disable-pixel-alignment=true
https://hg-edge.mozilla.org/integration/autoland/pushloghtml?fromchange=749034452e2063e9f38c077e061e1be30ddcf83f&tochange=e97d977b1c9cf19c9b484dbefa377fb1f1b85203

Comment 5

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

:hiro, since you are the author of the regressor, bug 2048146, could you take a look? Also, could you set the severity field?

For more information, please visit BugBot documentation.

Comment 6

[Hiroyuki Ikezoe (:hiro)]

Thank you, Alice!