Fix UI draw order

crates/bevy_ui/src/layout/mod.rs

@@ -13,7 +13,7 @@ use bevy_ecs::{
 };
 use bevy_hierarchy::{Children, Parent};
 use bevy_log::warn;
-use bevy_math::Vec2;
+use bevy_math::{Vec2, Vec3};
 use bevy_transform::components::Transform;
 use bevy_utils::HashMap;
 use bevy_window::{PrimaryWindow, Window, WindowResolution, WindowScaleFactorChanged};
@@ -316,9 +316,12 @@ pub fn ui_layout_system(
         if node.calculated_size != new_size {
             node.calculated_size = new_size;
         }
-        let mut new_position = transform.translation;
-        new_position.x = to_logical(layout.location.x + layout.size.width / 2.0);
-        new_position.y = to_logical(layout.location.y + layout.size.height / 2.0);
+        let mut new_position = Vec3::new(
+            to_logical(layout.location.x + layout.size.width / 2.0),
+            to_logical(layout.location.y + layout.size.height / 2.0),
+            0.,
+        );
+
         if let Some(parent) = parent {
             if let Ok(parent_layout) = ui_surface.get_layout(**parent) {
                 new_position.x -= to_logical(parent_layout.size.width / 2.0);

crates/bevy_ui/src/render/mod.rs

@@ -36,7 +36,6 @@ use bevy_sprite::TextureAtlas;
 #[cfg(feature = "bevy_text")]
 use bevy_text::{PositionedGlyph, Text, TextLayoutInfo};
 use bevy_transform::components::GlobalTransform;
-use bevy_utils::FloatOrd;
 use bevy_utils::HashMap;
 use bytemuck::{Pod, Zeroable};
 use std::ops::Range;
@@ -583,7 +582,8 @@ const QUAD_INDICES: [usize; 6] = [0, 2, 3, 0, 1, 2];
 pub struct UiBatch {
     pub range: Range<u32>,
     pub image: Handle<Image>,
-    pub z: f32,
+    /// We don't use the stack index as a sort key because multiple `ExtractedUiNodes` can have the same stack index.
+    pub order: u32,
 }
 
 const TEXTURED_QUAD: u32 = 0;
@@ -606,7 +606,7 @@ pub fn prepare_uinodes(
     let mut start = 0;
     let mut end = 0;
     let mut current_batch_image = DEFAULT_IMAGE_HANDLE.typed();
-    let mut last_z = 0.0;
+    let mut batch_order = 0;
 
     #[inline]
     fn is_textured(image: &Handle<Image>) -> bool {
@@ -620,8 +620,9 @@ pub fn prepare_uinodes(
                     commands.spawn(UiBatch {
                         range: start..end,
                         image: current_batch_image,
-                        z: last_z,
+                        order: batch_order,
                     });
+                    batch_order += 1;
                     start = end;
                 }
                 current_batch_image = extracted_uinode.image.clone_weak();
@@ -738,7 +739,6 @@ pub fn prepare_uinodes(
             });
         }
 
-        last_z = extracted_uinode.transform.w_axis[2];
         end += QUAD_INDICES.len() as u32;
     }
 
@@ -747,7 +747,7 @@ pub fn prepare_uinodes(
         commands.spawn(UiBatch {
             range: start..end,
             image: current_batch_image,
-            z: last_z,
+            order: batch_order,
         });
     }
 
@@ -825,7 +825,7 @@ pub fn queue_uinodes(
                     draw_function: draw_ui_function,
                     pipeline,
                     entity,
-                    sort_key: FloatOrd(batch.z),
+                    sort_key: batch.order,
                 });
             }
         }

crates/bevy_ui/src/render/render_pass.rs

@@ -11,7 +11,6 @@ use bevy_render::{
     renderer::*,
     view::*,
 };
-use bevy_utils::FloatOrd;
 
 pub struct UiPassNode {
     ui_view_query: QueryState<
@@ -86,14 +85,14 @@ impl Node for UiPassNode {
 }
 
 pub struct TransparentUi {
-    pub sort_key: FloatOrd,
+    pub sort_key: u32,
     pub entity: Entity,
     pub pipeline: CachedRenderPipelineId,
     pub draw_function: DrawFunctionId,
 }
 
 impl PhaseItem for TransparentUi {
-    type SortKey = FloatOrd;
+    type SortKey = u32;
 
     #[inline]
     fn entity(&self) -> Entity {