Distortion at the edges of an `Overflow::Hidden` UI node

[Teajey]

Bevy version

Tested with 0.6.0 and 0.6.1

Operating system & version

macOS 11.3.1

What you did

Created a scrolling text animation using five TextBundles inside an Overflow::Hidden NodeBundle

What you expected to happen

That the text scrolls by undistorted. This was the behavior until I came back to my code after a couple of hours and it seemed to have spontaneously changed.

What actually happened

The text is distorted near the end of the UI node, and escapes it's bounds despite overflow: Overflow::Hidden being set.

Additional information

Here's a screen capture:
https://user-images.githubusercontent.com/21069848/155900989-0f5b1794-e15b-4c34-8dd0-f43309352b3c.mov

And here it is again slowed down 4x:
https://user-images.githubusercontent.com/21069848/155901017-26d338fe-8a1c-4fde-a081-94efc98bdd1e.mov

[mockersf]

Your video don't load for me, but would it happen to be the same issue as #3493?

[Teajey]

Your video don't load for me, but would it happen to be the same issue as #3493?

I don't think so. Looks like more of a tearing effect in your one whereas here it's getting squished on the Y axis and escaping the bounds of the ui node.

Here are some stills:

And as the title loops across the black area it's all warped on the Y axis:

The text isn't supposed to be changing it's appearance at all. Except for the RGB colors, that's intended. In fact I probably should've removed that for this example.

[Teajey]

For what it's worth I'm not seeing this in Linux Mint 20.3

Edit: The squishing effect is still present, but the text is not escaping the bounds of the node.

[Teajey]

On macOS 11.3.1 with Bevy 0.8 I'm getting the same results as in Linux Mint 20.3 now. The text doesn't escape it's bounds, but it's still distorted at the edges

[mockersf]

I think this has been fixed by #6351. @Teajey can you reproduce on the main branch?

[vultix]

I'm seeing this same issue, this time with an image, and have a simple reproduction. I'm on bevy 0.9, and macos 12.6, m1 max cpu.

What I'm trying to do is clip off half of an image. The parent node is half the height of the child, and has overflow set to hidden.

You'll notice that the image is heavily distorted. Setting overflow to visible fixes the warping, as does changing the container height to be the same as the child image height.

I have a simple reproduction here:

use bevy::prelude::*;

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

fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
    const IMG_SIZE: f32 = 256.0;
    const CONTAINER_HEIGHT: f32 = 128.0;
    
    // ui camera
    commands.spawn(Camera2dBundle::default());
    commands
        .spawn(NodeBundle {
            style: Style {
                size: Size::new(Val::Px(IMG_SIZE), Val::Px(CONTAINER_HEIGHT)),
                overflow: Overflow::Hidden,
                ..default()
            },
            background_color: Color::RED.into(),
            ..default()
        })
        .with_children(|parent| {
            parent.spawn(ImageBundle {
                style: Style {
                    size: Size::new(Val::Px(IMG_SIZE), Val::Px(IMG_SIZE)),
                    ..default()
                },
                image: UiImage(asset_server.load("pause.png")),
                ..default()
            });
        });
}

Here's the pause.png image:

Here's a screenshot of what bevy is rendering:

Here's what it looks like with Overflow::Visible:

[vultix]

I've confirmed this is happening on the main branch of bevy as well

[rparrett]

I can reproduce this on bevy main as well. The issue seems scale-factor dependent. It isn't present with

        .add_plugins(DefaultPlugins.set(WindowPlugin {
            window: WindowDescriptor {
                scale_factor_override: Some(1.),
                ..default()
            },
            ..default()
        }))

Edit:

[mockersf]

I focused on text last time I tried to fix that, #7142 should also fix it for images