Faint lines between nodes in 0.14.0rc2

[rparrett]

Bevy version

release-0.14, current main (d659a1f7d506c5c6eba9dfe2a6e878a8c72ecef6)
bisected to #13523

Relevant system information

SystemInfo { os: "MacOS 14.5 ", kernel: "23.5.0", cpu: "Apple M1 Max", core_count: "10", memory: "64.0 GiB" }
AdapterInfo { name: "Apple M1 Max", vendor: 0, device: 0, device_type: IntegratedGpu, driver: "", driver_info: "", backend: Metal }

scale_factor 2.0

What you did

Code

use bevy::prelude::*;

const BG: Color = Color::BLACK;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_systems(Startup, setup)
        .run();
}

fn setup(mut commands: Commands) {
    commands.spawn(Camera2dBundle::default());

    let container = commands
        .spawn(NodeBundle {
            style: Style {
                width: Val::Percent(100.0),
                height: Val::Percent(100.0),
                flex_direction: FlexDirection::Column,
                align_items: AlignItems::Center,
                justify_content: JustifyContent::Center,
                ..default()
            },
            background_color: Color::NONE.into(),
            ..default()
        })
        .id();

    let top = commands
        .spawn(NodeBundle {
            style: Style {
                width: Val::Px(300.),
                height: Val::Px(50.0),
                ..default()
            },
            background_color: BG.into(),
            ..default()
        })
        .id();

    let bottom = commands
        .spawn(NodeBundle {
            style: Style {
                width: Val::Px(300.),
                height: Val::Px(51.0),
                ..default()
            },
            background_color: BG.into(),
            ..default()
        })
        .id();

    commands.entity(container).push_children(&[top, bottom]);
}

What went wrong

There are faint lines between the adjacent flex nodes.

0.13.2

main

Additional information

This was reported by a user who experienced a similar issue in the wild while migrating their project to 0.14.0-rc.2.

[hymm]

The issue probably that the edges are on a half pixel, so they end up getting antialiased. But I'm not sure what the right fix is here. If there wasn't another shape there the edge should get antialiased since it's not fully on the pixel.

[rparrett]

The issue probably that the edges are on a half pixel

I had a similar thought and added 1px to one of the boxes and saw the same behavior. I'm not sure if that's the right way to test though.