Clipping a rectangle with border-radius results in color fringing from obscured items under the top most item

[NigelBreslaw]

Bug Description

export component ExportedComponent {
    width: 300px;
    height: 300px;

    Rectangle {
        width: 33px;
        height: 33px;
        border-radius: self.width / 2;
        clip: true;
        Rectangle {
            background: green;
        }
        Rectangle {
            background: black;
        }
    }
}

In this example the expected behaviour is a pure black circle with smooth edges with black in various states of opacity. However the completely obscured green rectangle bleeds through and causes unexpected colour fringing.

Reproducible Code (if applicable)

export component ExportedComponent {
    width: 300px;
    height: 300px;

    Rectangle {
        width: 33px;
        height: 33px;
        border-radius: self.width / 2;
        clip: true;
        Rectangle {
            background: green;
        }
        Rectangle {
            background: black;
        }
    }
}

Environment Details

• Slint Version: 1.10
• Platform/OS: MacOS
• Programming Language:
• Backend/Renderer: Skia

Product Impact

It's only when working on the custom controls with a screen magnifier that I finally worked out what was going on. Putting multiple items inside a single clipped rectangle with a border-radius is widely used. I've been wondering for ages if there was something odd about how smooth a border-radius is. For example iOS and browsers do have differences in anti-aliasing here. Figma even has a slider so you increase and decrease this level on any rectangle to simulate different platforms. But it was never a consistent issue. Now I wonder if this was mostly the problem. In many situations you would never notice this unless you happen to overlap rectangles with specific colour combos.

It's also quite hard to work around this issue, without exporting correct images from a paint package.