UI Node children overflow with BorderRadius

[mirsella]

Bevy version and features

0.17.2

What you did

spawn a parent node with a BorderRadius and Overflow::hidden or clip. the child sides are still shown outside the parent node sides.

What you expected

the child red node borders would be clipped since its parent has overflow hidden, so that none of the child goes outside o the parent

use bevy::{color::palettes::css, prelude::*};

fn main() -> AppExit {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_systems(Startup, setup_ui)
        .run()
}

fn setup_ui(mut commands: Commands) {
    commands.spawn(Camera2d);

    commands.spawn((
        Node {
            width: Val::Percent(100.0),
            height: Val::Percent(100.0),
            display: Display::Flex,
            justify_content: JustifyContent::Center,
            align_items: AlignItems::Center,
            ..default()
        },
        children![(
            Node {
                width: Val::Percent(50.),
                height: Val::Percent(50.),
                overflow: Overflow::hidden(),
                ..default()
            },
            BackgroundColor(Color::WHITE),
            BorderRadius::all(Val::Percent(25.0)),
            children![(
                Node {
                    width: Val::Percent(100.0),
                    height: Val::Percent(100.0),
                    ..default()
                },
                BackgroundColor(css::RED.with_alpha(0.5).into()),
            )]
        )],
    ));
}

[alice-i-cecile]

Right, you're expecting this to clip the child node too? Is that standard behavior on web?

@ickshonpe this may be a bug in the shaders you've worked on.

[ickshonpe]

It's not a bug in the shaders, bevy_ui's clipping is just really basic and only supports axis-aligned rectangles. The red area coloured area is outside the parent node's border but inside the parent node's clipping rectangle.

[mirsella]

you're expecting this to clip the child node too?

yes sorry should have specified
on the web the child node borders are also clipped