1789720 - css mask-image does not work with with transform and dimensions over 32767px

Status: NEW

(Core :: Graphics, defect, P3)

Description

[jedierikb]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

Steps to reproduce:

https://codepen.io/jedierikb/pen/WNJQWNM

<div id="y">
<div id="x"></div>
<div id="d">
<div id="e"></div>
</div>
</div>

#y {
transform: translateY( 0px );
}

#x {
background-color: green;
width: 600px;
height: 32768px;
position: absolute;
}

#d {
width: 600px;
height: 32768px;
-webkit-mask-image: url(https://tympanus.net/codrops-playground/assets/images/cssref/properties/mask-position/mask-image.png);
mask-image: url(https://tympanus.net/codrops-playground/assets/images/cssref/properties/mask-position/mask-image.png);

position: absolute;
}

#e {
background: orange;
width: 600px;
height: 32768px;
position: absolute;
}

Actual results:

the mask is not applied

Expected results:

the mask should be applied
to fix you can (1) remove the transform from the top node or (2) reduce the size of the content by 1px to 32767px

Comment 1

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

The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[David Shin[:dshin]]

We reject the dimension over 32767 as too big with:

#0  mozilla::gfx::Factory::CheckSurfaceSize (sz=..., extentLimit=32767, allocLimit=500000000) at /home/dshin/mozilla-unified/gfx/2d/Factory.cpp:320
#1  0x00007fc270479d07 in mozilla::gfx::Factory::AllowedSurfaceSize (aSize=...) at /home/dshin/mozilla-unified/gfx/2d/Factory.cpp:301
#2  0x00007fc2709e8205 in mozilla::layers::WebRenderCommandBuilder::BuildWrMaskImage (this=0x7fc28329e3f0, aMaskItem=0x7fc25eee47d0, aBuilder=..., aResources=..., aSc=..., aDisplayListBuilder=0x7fc25ee2b000, aBounds=...)
    at /home/dshin/mozilla-unified/gfx/layers/wr/WebRenderCommandBuilder.cpp:2744

This seems to be defined by pref gfx.max-texture-size, which is 32767 by default.

Comment 3

[Nicolas Silva [:nical]]

We have an nsDisplayMaskAndClipPaths with an enormous size. We know that the size comes form the specified height in the css source, but it should be clipped to the viewport to prevent unreasonable allocations.

Comment 4

[jedierikb]

As noted in the OP, removing transforms enables the mask.
Example:
https://codepen.io/jedierikb/pen/rNvjjjB

However, transforms are helpful for animation optimizations, so it would be nice to be able to use them.

(posting this in case it is helpful for brainstorming solutions)