Fix UI overflow clipping

Cargo.toml

@@ -4152,6 +4152,17 @@ description = "An example demonstrating how to translate, rotate and scale UI el
 category = "UI (User Interface)"
 wasm = true
 
+[[example]]
+name = "overflow_scale"
+path = "examples/ui/scroll_and_overflow/overflow_scale.rs"
+doc-scrape-examples = true
+
+[package.metadata.example.overflow_scale]
+name = "UI Overflow Scale"
+description = "An example demonstrating overflow clipping when scaling UI elements."
+category = "UI (User Interface)"
+wasm = true
+
 [[example]]
 name = "ui_target_camera"
 path = "examples/ui/ui_target_camera.rs"

crates/bevy_ui/src/update.rs

@@ -96,8 +96,14 @@ fn update_clipping(
         // The current node doesn't clip, propagate the optional inherited clipping rect to any children
         maybe_inherited_clip
     } else {
-        // Find the current node's clipping rect and intersect it with the inherited clipping rect, if one exists
-        let mut clip_rect = Rect::from_center_size(transform.translation, computed_node.size());
+        // Find the current node's clipping rect and intersect it with the inherited clipping rect, if one exists.
+
+        // ComputedNode is in layout space, that is, it does not include UiTransform's scale,
+        // however clipping should respect the scale so we apply it manually to the clip rect.
+        let (ui_scale, _, _) = transform.to_scale_angle_translation();
+
+        let mut clip_rect =
+            Rect::from_center_size(transform.translation, computed_node.size() * ui_scale);
 
         // Content isn't clipped at the edges of the node but at the edges of the region specified by [`Node::overflow_clip_margin`].
         //
@@ -109,8 +115,8 @@ fn update_clipping(
             crate::OverflowClipBox::PaddingBox => computed_node.border(),
         };
 
-        clip_rect.min += clip_inset.min_inset;
-        clip_rect.max -= clip_inset.max_inset;
+        clip_rect.min += clip_inset.min_inset * ui_scale;
+        clip_rect.max -= clip_inset.max_inset * ui_scale;
 
         clip_rect = clip_rect
             .inflate(node.overflow_clip_margin.margin.max(0.) / computed_node.inverse_scale_factor);

examples/README.md

@@ -636,6 +636,7 @@ Example | Description
 [Transparency UI](../examples/ui/styling/transparency_ui.rs) | Demonstrates transparency for UI
 [UI Drag and Drop](../examples/ui/ui_drag_and_drop.rs) | Demonstrates dragging and dropping UI nodes
 [UI Material](../examples/ui/ui_material.rs) | Demonstrates creating and using custom Ui materials
+[UI Overflow Scale](../examples/ui/scroll_and_overflow/overflow_scale.rs) | An example demonstrating overflow clipping when scaling UI elements.
 [UI Scaling](../examples/ui/ui_scaling.rs) | Illustrates how to scale the UI
 [UI Target Camera](../examples/ui/ui_target_camera.rs) | Demonstrates how to use `UiTargetCamera` and camera ordering.
 [UI Texture Atlas](../examples/ui/images/ui_texture_atlas.rs) | Illustrates how to use TextureAtlases in UI

examples/ui/scroll_and_overflow/overflow_scale.rs

@@ -0,0 +1,58 @@
+//! Ui scaling with overflow clipping.
+
+use bevy::{input::mouse::MouseWheel, prelude::*};
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        .add_systems(Startup, scene.spawn())
+        .add_systems(Update, zoom)
+        .run();
+}
+
+fn scene() -> impl SceneList {
+    bsn_list![Camera2d, root()]
+}
+
+#[derive(Component, Clone, Default)]
+struct Root;
+
+fn root() -> impl Scene {
+    bsn! {
+        Root
+        Node {
+            width: percent(100),
+            height: percent(100),
+            display: Display::Flex,
+            justify_content: JustifyContent::Center,
+            align_items: AlignItems::Center,
+            flex_direction: FlexDirection::Column
+        }
+        Children [
+            Node {
+                overflow: Overflow::clip(),
+                width: px(150.),
+            }
+            Children [
+                Node {
+                    width: px(150.)
+                }
+                Text::new("Scroll to zoom.")
+                BackgroundColor(Color::BLACK),
+
+                Node
+                Text::new("This should be clipped")
+                BackgroundColor(Color::BLACK)
+            ]
+        ]
+    }
+}
+
+fn zoom(
+    mut root_transform: Single<&mut UiTransform, With<Root>>,
+    mut scroll: MessageReader<MouseWheel>,
+) {
+    for event in scroll.read() {
+        root_transform.scale *= 1.0 + event.y * 0.05;
+    }
+}