fix(image-button): fix rendering on wgpu

src/widget/button/widget.rs

@@ -21,6 +21,7 @@ use iced_core::{
     Background, Clipboard, Color, Layout, Length, Padding, Point, Rectangle, Shell, Vector, Widget,
 };
 use iced_renderer::core::widget::{operation, OperationOutputWrapper};
+use iced_wgpu::graphics::Mesh;
 
 use crate::theme::THEME;
 
@@ -409,10 +410,37 @@ impl<'a, Message: 'a + Clone> Widget<Message, crate::Theme, crate::Renderer>
             on_remove,
         } = &self.variant
         {
+            let mut parent_bounds = bounds;
+            parent_bounds.y -= 8.0;
+            parent_bounds.width += 16.0;
+            parent_bounds.height += 16.0;
+
+            renderer.with_layer(parent_bounds, |renderer| {
                 let selection_background = theme.selection_background();
 
                 let c_rad = THEME.with(|t| t.borrow().cosmic().corner_radii);
 
+                // NOTE: Workaround to round the border of the unselected, unhovered image.
+                if !self.selected && !is_mouse_over {
+                    let mut bounds = bounds;
+                    bounds.x -= 2.0;
+                    bounds.y -= 2.0;
+                    bounds.width += 4.0;
+                    bounds.height += 4.0;
+                    renderer.fill_quad(
+                        renderer::Quad {
+                            bounds,
+                            border: Border {
+                                width: 2.0,
+                                color: crate::theme::active().current_container().base.into(),
+                                radius: 9.0.into(),
+                            },
+                            shadow: Shadow::default(),
+                        },
+                        Color::TRANSPARENT,
+                    );
+                }
+
                 if self.selected {
                     renderer.fill_quad(
                         Quad {
@@ -480,6 +508,7 @@ impl<'a, Message: 'a + Clone> Widget<Message, crate::Theme, crate::Renderer>
                         }
                     }
                 }
+            });
         }
     }
 
@@ -525,7 +554,7 @@ impl<'a, Message: 'a + Clone> Widget<Message, crate::Theme, crate::Renderer>
         let child_tree = self
             .content
             .as_widget()
-            .a11y_nodes(child_layout, &child_tree, p);
+            .a11y_nodes(child_layout, child_tree, p);
 
         let Rectangle {
             x,
@@ -781,6 +810,24 @@ pub fn draw<Renderer: iced_core::Renderer, Theme>(
         // Then draw the button contents onto the background.
         draw_contents(renderer, styling);
 
+        let mut clipped_bounds = bounds;
+        clipped_bounds.height += styling.border_width;
+
+        renderer.with_layer(clipped_bounds, |renderer| {
+            // NOTE: Workaround to round the border of the hovered/selected image.
+            renderer.fill_quad(
+                renderer::Quad {
+                    bounds,
+                    border: Border {
+                        width: styling.border_width,
+                        color: crate::theme::active().current_container().base.into(),
+                        radius: 0.0.into(),
+                    },
+                    shadow: Shadow::default(),
+                },
+                Color::TRANSPARENT,
+            );
+
             // Finish by drawing the border above the contents.
             renderer.fill_quad(
                 renderer::Quad {
@@ -794,6 +841,7 @@ pub fn draw<Renderer: iced_core::Renderer, Theme>(
                 },
                 Color::TRANSPARENT,
             );
+        });
     } else {
         draw_contents(renderer, styling);
     }