Pinegrow not masking gradients

General Bug Reports
1

I’ve been trying to do something fancy with masks over gradients and positioning.

The mask isn’t activating within PG, but does render properly in browsers (Safari, Firefox, Chrome).

I’ve internalised all relevant CSS into an inline style to demonstrate, but find I can only attach image files. I’ve embedded the html file as code here as a workaround. The desired outcome (and which is achieved on the browser) is a bar with a background gradient, masked to only reveal the middle section.

This is how it shows in the browsers (as intended)…

As desired
As desired1172×120 6.75 KB

This is how PG displays it…
As Pinegrow shows it

I’m using PG 8.4 on a M1 Mac Studio Max / 32GB, running macOS Sequoia 15.5.

<!DOCTYPE html>
<html lang="en_nz">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .rating_box p {
            mix-blend-mode: exclusion;
            color: white;
        }

        .rating_box>div {
            position: relative;
        }

        .rating_box>div>div {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        #summed_bugs>div {
            mask-image: linear-gradient(to right,
                    hsl(0 0 0 / 0.0) 15.0%,
                    hsl(0 0 0 / 1.0) 40.0%,
                    hsl(0 0 0 / 0.0) 65.0%);
        }

        .rating_bugs {
            background-image: linear-gradient(to right, 
               hsl(120, 100%, 50%) 0%, 
               hsl(60, 100%, 50%) 25%, 
               hsl(0, 100%, 50%) 100%);
        }
    </style>
</head>

<body>
    <section id="tldr">
        <div id="ratings">
            <div class="rating_box">
                <div id="summed_bugs">
                    <div class="rating_bugs"></div>
                    <p>Some Text</p>
                </div>
            </div>
        </div>
    </section>
</body>
</html>