Skip to content

Pixel wide gaps between adjacent UI nodes  #7712

@ickshonpe

Description

@ickshonpe

Bevy version

main

What you did

gap

use bevy::prelude::*;

fn main() {
    App::new()
        .add_plugins(DefaultPlugins)
        .add_startup_system(setup)
        .run();
}

fn setup(mut commands: Commands) {
    let w = 100.3;
    commands.spawn(Camera2dBundle::default());
    commands.spawn(NodeBundle {
        style: Style {          
            flex_direction: FlexDirection::Column,  
            align_items: AlignItems::Center,
            size: Size::new(Val::Px(963.3333), Val::Percent(100.)),
            ..Default::default()
        },
        background_color: BackgroundColor(Color::WHITE),
        ..Default::default()
    })
    .with_children(|parent| {
        parent.spawn(NodeBundle {
            style: Style {
                justify_content: JustifyContent::Center,
                size: Size::new(Val::Percent(100.), Val::Percent(50.)),
                ..Default::default()
            },
            ..Default::default()
        })
        .with_children(|commands| {
            commands.spawn(
                NodeBundle {
                    style: Style {
                        size: Size::width(Val::Px(w)),
                        ..Default::default()
                    },
                    background_color: BackgroundColor(Color::NAVY),
                    ..Default::default()
                },
            );
            commands.spawn(
                NodeBundle {
                    style: Style {
                        size: Size::width(Val::Px(w)),
                        ..Default::default()
                    },
                    background_color: BackgroundColor(Color::DARK_GRAY),
                    ..Default::default()
                },
            );
        });
        parent.spawn(NodeBundle {
            style: Style {            
                justify_content: JustifyContent::Center,
                size: Size::new(Val::Px(w * 2.), Val::Percent(25.)),
                ..Default::default()
            },
            background_color: BackgroundColor(Color::RED),
            ..Default::default()
        });
    });    
}

A pixel-wide gap appears between adjacent nodes at certain node sizes.

The same gap appears vertically if you modify the example to reverse the flex-direction.

Metadata

Metadata

Assignees

No one assigned

    Labels

    A-UIGraphical user interfaces, styles, layouts, and widgetsC-BugAn unexpected or incorrect behavior

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions