Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI node gets compressed in ui example scrollable area boundary #8167

Closed
doup opened this issue Mar 22, 2023 · 6 comments · Fixed by #8197
Closed

UI node gets compressed in ui example scrollable area boundary #8167

doup opened this issue Mar 22, 2023 · 6 comments · Fixed by #8197
Labels
A-UI Graphical user interfaces, styles, layouts, and widgets C-Bug An unexpected or incorrect behavior

Comments

@doup
Copy link
Contributor

doup commented Mar 22, 2023

Bevy version

v0.11.0-dev (ce33354)

Relevant system information

AdapterInfo { name: "Apple M2 Max", vendor: 0, device: 0, device_type: IntegratedGpu, driver: "", driver_info: "", backend: Metal }

What you did

  • In the ui example, scroll until a node shows at the boundary

What went wrong

See how Item 18 gets vertically compressed when it's on the boundary:

image

For comparison, this is how it should look like (this image is when the node it's not at the boundary):

image

I've debugged in XCode and I'm seeing this:

image

I've compared the Y position & UVs for the letter m from Item 17 and Item 18:

image

image

  • The height of Item 17 m letter is 9.5 (pos 2-1), and vertical UV range is 0.37 (uv 2-1)
  • The height of Item 18 m letter is 3.5 (36.8% of 9.5)
  • The UV (v) for 4 is 0.25 (67.6%), instead it should be 0.136 (36.8%)
@doup doup added C-Bug An unexpected or incorrect behavior S-Needs-Triage This issue needs to be labelled labels Mar 22, 2023
@doup doup changed the title UI node get compressed in ui example scrollable area boundary UI node gets compressed in ui example scrollable area boundary Mar 22, 2023
@rparrett
Copy link
Contributor

rparrett commented Mar 22, 2023

A previous instance of this bug was dependent on scale factor, and that seems to be the case here too.

Adding

.add_plugins(DefaultPlugins.set(WindowPlugin {
    primary_window: Some(Window {
        resolution: WindowResolution::default().with_scale_factor_override(1.),
        ..default()
    }),
    ..default()
}))

removes the squish.

@doup
Copy link
Contributor Author

doup commented Mar 22, 2023

That "fixes" the issue… but it also scales everything to half the size. 😅

I'm looking /bevy_ui/src/render/mod.rs and I have the hunch that the issue might be here:
https://github.com/bevyengine/bevy/blob/main/crates/bevy_ui/src/render/mod.rs#L492

The clipping should be affecting atlas_extent, no?

(Good excuse to read the UI rendering code.)

@mockersf
Copy link
Member

I think fixing this for text broke it for images, then fixing it for image broke it back for text...

Be sure to test both when trying a new fix 👍

@alice-i-cecile alice-i-cecile added A-UI Graphical user interfaces, styles, layouts, and widgets and removed S-Needs-Triage This issue needs to be labelled labels Mar 23, 2023
@doup
Copy link
Contributor Author

doup commented Mar 23, 2023

I think overflow clipping is just broken, it only supports AABB positions clipping (not UVs). If a node is rotated/scaled inside an Overflow::Hidden node it gets funky. To be fair, there is a comment mentioning that this is not supported.

Without Overflow::Hidden:
image

With Overflow::Hidden:
image

@doup
Copy link
Contributor Author

doup commented Mar 23, 2023

OK, I think I'm going to prepare an overflow clipping debug example.

@ickshonpe
Copy link
Contributor

I think this was probably introduced when scale_factor was removed from ExtractedUiNode.

@cart cart closed this as completed in 1a7f046 Apr 5, 2023
cart added a commit that referenced this issue Apr 5, 2023
# Objective

- Add a new example that helps debug different UI overflow scenarios
- This example tests the clipping behavior for images and text when the
node is moved, scaled or rotated.

## Solution

- Add a new `overflow_debug` example

# Preview

**Note:** Only top-left is working properly right now.


https://user-images.githubusercontent.com/188612/227629093-26c94c67-1781-437d-8410-e854b6f1adc1.mp4

---

Related #8095, #8167

---------

Co-authored-by: Carter Anderson <mcanders1@gmail.com>
Co-authored-by: ickshonpe <david.curthoys@googlemail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-UI Graphical user interfaces, styles, layouts, and widgets C-Bug An unexpected or incorrect behavior
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants