Image mask causing image to be hidden behind other SVG elements

[chopfitzroy]

Bug report

Description / Observed Behavior

What kind of issues did you encounter with Satori?

Child img elements of elements that use the maskImage style prop are being hidden behind one of the SVG elements.

Screenshots of the problematic SVG element:

SVG element	SVG element removed

Expected Behavior

How did you expect Satori to behave here?

That the image would show the same way it does in the browser (or the Native tab in the Satori playground).

Reproduction

Link.

Additional Context

Satori version, and any other context about the problem here.

Satori version: "satori": "^0.10.9".

I tried installing both of the following branches as they include updates to masking:

• fix: positioned mask image #566
• feat: upgrade resvg to ^2.6.0 & refine mask-image #572

Neither rendered the results I wanted.

I also tried a variation of the code where I removed the absolutely position child and applied the mask to the parent.

This also works in the browser / Native tab in the satori playground, but seemed to break the SVG render even more:

Expand alternate code sample

() => {
  //...
  return (
    <div style={{
      width: 400,
      height: 400,
      display: 'flex',
      overflow: 'hidden',
      position: 'relative',
      alignItems: 'center',
      justifyContent: 'center',
      maskImage: `url(${props.mask})`,
      maskRepeat: 'no-repeat',
      WebkitMaskImage: `url(${props.mask})`,
      WebkitMaskRepeat: 'no-repeat',
    }}>
        <img src={submission.portrait} style={{
        top: submission.x,
        left: submission.y,
        position: 'absolute',
        maxWidth: CANVAS_WIDTH,
        maxHeight: CANVAS_HEIGHT,
        transform: `scale(${zoom})`,
      }} />
      <div style={{
        width: BORDER_WIDTH,
        height: BORDER_HEIGHT,
        backgroundSize: 'cover',
        backgroundImage: `url(${props.border})`,
        backgroundRepeat: 'no-repeat'
      }}>
      </div>
    </div>
  )
}

[pjeweb]

I don't think it's got to to with the nesting. The default mask mode for images in satori is was luminance not alpha. So if you use the mask but with a white shape instead of black it works:

https://og-playground.vercel.app/?share=lVRtT9swEP4rljUJkNqkTGhD2YrEAK2V9iZAsEmVRl4uiYtje7ZD35T_PjtpGrcr28gn557nfPfcnW-FY54ADvDhERqeodWExZwpjS7Ov9yd3_y8H1_ejtAQnQwG73ag0dX44-h2g7Xoh6_Xl1fXG8fXbzrHNbRxbLAWXXJeGOPAO3WMQnKhjNXkhVARqscATXCutVCB7xOPRJEXc__u07cfs_ytD_OwEBT6ltif5USDJ1g2wT3rHXGZgNzrvzw9_j6bLjb-DXXjWzkJqTIqiFKEszareYAGdYBFexBcahkSvTfWyV1yfPIr8ltSfx3Umwo3GkISdCkZOrRnhN4n5AkpvaAwXNVh7Tcjic4D24A6rv1yIFluIru2hChBQ5PeQUphfrCx8yeQKeUzA-QkSYB1kOCKaCPSQBJoqMkTdGBIScbGGgpl4BiYBtmB01Jpki4uuDEzk8gOoarOWuZeSQhpLtpCNh-F1NzjWmSj0TVFXGtebNue070lL4wUp6V25DWDNi7CDAL0UEp6-GpVz6Fn7dXRww7zGgSEVinjfVmf3bvuIXok-vN_39jx_3avU0ZTSFJkSMl4uOqm02vnq3quxA53_ke1HXDxkrrN75uRdNfHNmG0HtCtLeJQTNJMpVyaXj6oOKRgamVXg1ulqkJ-N0a-maN_DdX6pbjLyYnZPpqtBeUOVxg_ZpKXLLkhS9PCg9g-HVd5x9jX5WafbPe589jT5z1tdmV25yOzLyYM9zAXti8KBytca8WB3QC4Ubb-SSAqMxykIVXQw1DwKbldCLv89az-M_ek5t1eFREkONCyhKqHdRgZRg7UbAouaYKr3w

It's still off from the browser in terms of scaling/positioning, but that seems to be another problem.

The default mask mode should be fixed with this #548

[chopfitzroy]

Luminance will work and thank you for linking the relevant issue 😄

Happy to consider this closed! ❤️