Unstable z-order sorting when using multiple root UI nodes

[alice-i-cecile]

Bevy version

0.5

Operating system & version

Windows 10

What you did

pub use bevy::prelude::*;

pub struct Tooltips;

pub fn test_square(mut commands: Commands, mut materials: ResMut<Assets<ColorMaterial>>) {
    commands
        .spawn_bundle(NodeBundle {  // blue square
            style: Style {
                size: Size::new(Val::Px(200.0), Val::Px(200.0)),
                position_type: PositionType::Absolute,
                ..Default::default()
            },
            material: materials.add(Color::rgb(0.4, 0.4, 1.0).into()),
            ..Default::default()
        })
        //.insert(Tooltips)  // WHEN THIS LINE IS ON, THE TEST SQUARE DOES NOT SHOW UP
        ;
}

pub fn spawn_hud(mut commands: Commands, mut materials: ResMut<Assets<ColorMaterial>>) {
    commands.spawn_bundle(UiCameraBundle::default());

    commands
        /* ui root node */
        .spawn_bundle(NodeBundle {
            style: Style {
                size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
                ..Default::default()
            },
            material: materials.add(Color::rgba_u8(0, 0, 0, 0).into()),
            ..Default::default()
        })
        .with_children(|parent| {
            parent.spawn_bundle(NodeBundle {
                material: materials.add(Color::BLACK.into()),
                ..Default::default()
            });
        });
}

pub fn main() {
    App::build()
    
        .insert_resource(ClearColor(Color::rgb_u8(10, 10, 10)))
        .insert_resource(WindowDescriptor {
            width: (32. * 20.),
            height: (32. * 15.),
            ..Default::default()
        })
        .add_plugins(DefaultPlugins)
        .add_startup_system(spawn_hud.system())
        .add_startup_system(test_square.system())
        .run();
}

What you expected to happen

The square appears, or doesn't.

What actually happened

Adding the marker component to the entity changes the relative order of the square and the HUD, causing the square to disappear.
Removing or tweaking most of the other values (window size, clear_color, presence of the child on the HUD) also tends to change the behavior. Altering colors or changing the square's size seems to preserve the surprising behavior.

Additional information

Using multiple root UI nodes is currently (silently) unsupported; this . I think this is z-fighting in very unstable and surprising ways. #1211 attempts to allow for multiple UI root nodes.

@automeowtion on Discord reported this bug and gave the reproduction shown above here.

[alice-i-cecile]

For the most part, I think this should just be solved by allowing for multiple UI root nodes in a sensible way. Or loudly complaining when a user attempts to do so.

Z-fighting in general could probably use a warning of some sort, but I'm not sure how that should be done.

[Davier]

I'd be happy to revive #1211 if there is enough interest to merge it

[alice-i-cecile]

I'd be happy to revive #1211 if there is enough interest to merge it

Yeah, we should sit down and cohesively discuss what we want to do with parent/child mess and UI in the short-term. @cart when and where would you prefer that conversation happen?

[cart]

Hmm this should probably be a discussion first outlining the current situation. Then we can discuss solutions and hopefully agree on one that makes sense.

[james7132]

Is this still an issue after #5877?

[alice-i-cecile]

Nope, I'm happy to call this resolved.