From eda1d916546ada6a9b8d5e8a96f5033e871bfeb3 Mon Sep 17 00:00:00 2001
From: Emil Ernerfeldt <emil.ernerfeldt@gmail.com>
Date: Mon, 1 Nov 2021 22:08:23 +0100
Subject: [PATCH] Add culling of the painting for most widgets

This is a good early-out for widgets in `ScrollAreas`, but
also prepares for speeding up the first pass of a possible two-pass
version of egui: https://github.com/emilk/egui/issues/843
---
 egui/src/containers/collapsing_header.rs     |  72 +++----
 egui/src/containers/combo_box.rs             |  53 +++---
 egui/src/containers/frame.rs                 |   7 +-
 egui/src/containers/scroll_area.rs           |  86 ++++-----
 egui/src/menu.rs                             |   2 +-
 egui/src/ui.rs                               |  50 +++--
 egui/src/widgets/button.rs                   | 104 ++++++-----
 egui/src/widgets/color_picker.rs             | 187 ++++++++++---------
 egui/src/widgets/hyperlink.rs                |  30 +--
 egui/src/widgets/image.rs                    |  40 ++--
 egui/src/widgets/label.rs                    |  41 ++--
 egui/src/widgets/progress_bar.rs             | 129 +++++++------
 egui/src/widgets/selected_label.rs           |  25 +--
 egui/src/widgets/separator.rs                |  30 +--
 egui/src/widgets/slider.rs                   |   2 +-
 egui/src/widgets/text_edit/builder.rs        |  66 +++----
 egui_demo_lib/src/apps/demo/toggle_switch.rs |  61 +++---
 17 files changed, 524 insertions(+), 461 deletions(-)

diff --git a/egui/src/containers/collapsing_header.rs b/egui/src/containers/collapsing_header.rs
index 6a912782007..97e04e20088 100644
--- a/egui/src/containers/collapsing_header.rs
+++ b/egui/src/containers/collapsing_header.rs
@@ -295,45 +295,47 @@ impl CollapsingHeader {
         header_response
             .widget_info(|| WidgetInfo::labeled(WidgetType::CollapsingHeader, text.text()));
 
-        let visuals = ui
-            .style()
-            .interact_selectable(&header_response, self.selected);
-
-        if ui.visuals().collapsing_header_frame || self.show_background {
-            ui.painter().add(epaint::RectShape {
-                rect: header_response.rect.expand(visuals.expansion),
-                corner_radius: visuals.corner_radius,
-                fill: visuals.bg_fill,
-                stroke: visuals.bg_stroke,
-                // stroke: Default::default(),
-            });
-        }
+        if ui.is_rect_visible(rect) {
+            let visuals = ui
+                .style()
+                .interact_selectable(&header_response, self.selected);
+
+            if ui.visuals().collapsing_header_frame || self.show_background {
+                ui.painter().add(epaint::RectShape {
+                    rect: header_response.rect.expand(visuals.expansion),
+                    corner_radius: visuals.corner_radius,
+                    fill: visuals.bg_fill,
+                    stroke: visuals.bg_stroke,
+                    // stroke: Default::default(),
+                });
+            }
 
-        if self.selected
-            || self.selectable && (header_response.hovered() || header_response.has_focus())
-        {
-            let rect = rect.expand(visuals.expansion);
+            if self.selected
+                || self.selectable && (header_response.hovered() || header_response.has_focus())
+            {
+                let rect = rect.expand(visuals.expansion);
 
-            let corner_radius = 2.0;
-            ui.painter()
-                .rect(rect, corner_radius, visuals.bg_fill, visuals.bg_stroke);
-        }
+                let corner_radius = 2.0;
+                ui.painter()
+                    .rect(rect, corner_radius, visuals.bg_fill, visuals.bg_stroke);
+            }
 
-        {
-            let (mut icon_rect, _) = ui.spacing().icon_rectangles(header_response.rect);
-            icon_rect.set_center(pos2(
-                header_response.rect.left() + ui.spacing().indent / 2.0,
-                header_response.rect.center().y,
-            ));
-            let icon_response = Response {
-                rect: icon_rect,
-                ..header_response.clone()
-            };
-            let openness = state.openness(ui.ctx(), id);
-            paint_icon(ui, openness, &icon_response);
-        }
+            {
+                let (mut icon_rect, _) = ui.spacing().icon_rectangles(header_response.rect);
+                icon_rect.set_center(pos2(
+                    header_response.rect.left() + ui.spacing().indent / 2.0,
+                    header_response.rect.center().y,
+                ));
+                let icon_response = Response {
+                    rect: icon_rect,
+                    ..header_response.clone()
+                };
+                let openness = state.openness(ui.ctx(), id);
+                paint_icon(ui, openness, &icon_response);
+            }
 
-        text.paint_with_visuals(ui.painter(), text_pos, &visuals);
+            text.paint_with_visuals(ui.painter(), text_pos, &visuals);
+        }
 
         Prepared {
             id,
diff --git a/egui/src/containers/combo_box.rs b/egui/src/containers/combo_box.rs
index 873e4cd9472..3589fa12584 100644
--- a/egui/src/containers/combo_box.rs
+++ b/egui/src/containers/combo_box.rs
@@ -173,16 +173,18 @@ fn combo_box_dyn<'c, R>(
         let response = ui.interact(button_rect, button_id, Sense::click());
         // response.active |= is_popup_open;
 
-        let icon_rect = Align2::RIGHT_CENTER.align_size_within_rect(icon_size, rect);
-        let visuals = if is_popup_open {
-            &ui.visuals().widgets.open
-        } else {
-            ui.style().interact(&response)
-        };
-        paint_icon(ui.painter(), icon_rect.expand(visuals.expansion), visuals);
+        if ui.is_rect_visible(rect) {
+            let icon_rect = Align2::RIGHT_CENTER.align_size_within_rect(icon_size, rect);
+            let visuals = if is_popup_open {
+                &ui.visuals().widgets.open
+            } else {
+                ui.style().interact(&response)
+            };
+            paint_icon(ui.painter(), icon_rect.expand(visuals.expansion), visuals);
 
-        let text_rect = Align2::LEFT_CENTER.align_size_within_rect(galley.size(), rect);
-        galley.paint_with_visuals(ui.painter(), text_rect.min, visuals);
+            let text_rect = Align2::LEFT_CENTER.align_size_within_rect(galley.size(), rect);
+            galley.paint_with_visuals(ui.painter(), text_rect.min, visuals);
+        }
     });
 
     if button_response.clicked() {
@@ -223,21 +225,24 @@ fn button_frame(
     outer_rect.set_height(outer_rect.height().at_least(interact_size.y));
 
     let response = ui.interact(outer_rect, id, sense);
-    let visuals = if is_popup_open {
-        &ui.visuals().widgets.open
-    } else {
-        ui.style().interact(&response)
-    };
-
-    ui.painter().set(
-        where_to_put_background,
-        epaint::RectShape {
-            rect: outer_rect.expand(visuals.expansion),
-            corner_radius: visuals.corner_radius,
-            fill: visuals.bg_fill,
-            stroke: visuals.bg_stroke,
-        },
-    );
+
+    if ui.is_rect_visible(outer_rect) {
+        let visuals = if is_popup_open {
+            &ui.visuals().widgets.open
+        } else {
+            ui.style().interact(&response)
+        };
+
+        ui.painter().set(
+            where_to_put_background,
+            epaint::RectShape {
+                rect: outer_rect.expand(visuals.expansion),
+                corner_radius: visuals.corner_radius,
+                fill: visuals.bg_fill,
+                stroke: visuals.bg_stroke,
+            },
+        );
+    }
 
     ui.advance_cursor_after_rect(outer_rect);
 
diff --git a/egui/src/containers/frame.rs b/egui/src/containers/frame.rs
index 4214f991b2a..fd85819d89b 100644
--- a/egui/src/containers/frame.rs
+++ b/egui/src/containers/frame.rs
@@ -209,8 +209,11 @@ impl Prepared {
             ..
         } = self;
 
-        let shape = frame.paint(outer_rect);
-        ui.painter().set(where_to_put_background, shape);
+        if ui.is_rect_visible(outer_rect) {
+            let shape = frame.paint(outer_rect);
+            ui.painter().set(where_to_put_background, shape);
+        }
+
         ui.allocate_rect(outer_rect, Sense::hover())
     }
 }
diff --git a/egui/src/containers/scroll_area.rs b/egui/src/containers/scroll_area.rs
index 985a31eab3d..cc1251d8ad9 100644
--- a/egui/src/containers/scroll_area.rs
+++ b/egui/src/containers/scroll_area.rs
@@ -671,50 +671,52 @@ impl Prepared {
                 state.vel[d] = 0.0;
             }
 
-            // Avoid frame-delay by calculating a new handle rect:
-            let mut handle_rect = if d == 0 {
-                Rect::from_min_max(
-                    pos2(from_content(state.offset.x), min_cross),
-                    pos2(from_content(state.offset.x + inner_rect.width()), max_cross),
-                )
-            } else {
-                Rect::from_min_max(
-                    pos2(min_cross, from_content(state.offset.y)),
-                    pos2(
-                        max_cross,
-                        from_content(state.offset.y + inner_rect.height()),
-                    ),
-                )
-            };
-            let min_handle_size = ui.spacing().scroll_bar_width;
-            if handle_rect.size()[d] < min_handle_size {
-                handle_rect = Rect::from_center_size(
-                    handle_rect.center(),
-                    if d == 0 {
-                        vec2(min_handle_size, handle_rect.size().y)
-                    } else {
-                        vec2(handle_rect.size().x, min_handle_size)
-                    },
-                );
-            }
+            if ui.is_rect_visible(outer_scroll_rect) {
+                // Avoid frame-delay by calculating a new handle rect:
+                let mut handle_rect = if d == 0 {
+                    Rect::from_min_max(
+                        pos2(from_content(state.offset.x), min_cross),
+                        pos2(from_content(state.offset.x + inner_rect.width()), max_cross),
+                    )
+                } else {
+                    Rect::from_min_max(
+                        pos2(min_cross, from_content(state.offset.y)),
+                        pos2(
+                            max_cross,
+                            from_content(state.offset.y + inner_rect.height()),
+                        ),
+                    )
+                };
+                let min_handle_size = ui.spacing().scroll_bar_width;
+                if handle_rect.size()[d] < min_handle_size {
+                    handle_rect = Rect::from_center_size(
+                        handle_rect.center(),
+                        if d == 0 {
+                            vec2(min_handle_size, handle_rect.size().y)
+                        } else {
+                            vec2(handle_rect.size().x, min_handle_size)
+                        },
+                    );
+                }
 
-            let visuals = if scrolling_enabled {
-                ui.style().interact(&response)
-            } else {
-                &ui.style().visuals.widgets.inactive
-            };
+                let visuals = if scrolling_enabled {
+                    ui.style().interact(&response)
+                } else {
+                    &ui.style().visuals.widgets.inactive
+                };
 
-            ui.painter().add(epaint::Shape::rect_filled(
-                outer_scroll_rect,
-                visuals.corner_radius,
-                ui.visuals().extreme_bg_color,
-            ));
-
-            ui.painter().add(epaint::Shape::rect_filled(
-                handle_rect,
-                visuals.corner_radius,
-                visuals.bg_fill,
-            ));
+                ui.painter().add(epaint::Shape::rect_filled(
+                    outer_scroll_rect,
+                    visuals.corner_radius,
+                    ui.visuals().extreme_bg_color,
+                ));
+
+                ui.painter().add(epaint::Shape::rect_filled(
+                    handle_rect,
+                    visuals.corner_radius,
+                    visuals.bg_fill,
+                ));
+            }
         }
 
         ui.advance_cursor_after_rect(outer_rect);
diff --git a/egui/src/menu.rs b/egui/src/menu.rs
index 0c39ec3bda1..18231460116 100644
--- a/egui/src/menu.rs
+++ b/egui/src/menu.rs
@@ -426,7 +426,7 @@ impl SubMenuButton {
             crate::WidgetInfo::labeled(crate::WidgetType::Button, &text_galley.text())
         });
 
-        if ui.clip_rect().intersects(rect) {
+        if ui.is_rect_visible(rect) {
             let visuals = Self::visuals(ui, &response, menu_state, sub_id);
             let text_pos = Align2::LEFT_CENTER
                 .align_size_within_rect(text_galley.size(), rect.shrink2(button_padding))
diff --git a/egui/src/ui.rs b/egui/src/ui.rs
index 35474f153c5..fe798d0a6fc 100644
--- a/egui/src/ui.rs
+++ b/egui/src/ui.rs
@@ -122,13 +122,13 @@ impl Ui {
     // -------------------------------------------------
 
     /// A unique identity of this `Ui`.
-    #[inline(always)]
+    #[inline]
     pub fn id(&self) -> Id {
         self.id
     }
 
     /// Style options for this `Ui` and its children.
-    #[inline(always)]
+    #[inline]
     pub fn style(&self) -> &std::sync::Arc<Style> {
         &self.style
     }
@@ -161,7 +161,7 @@ impl Ui {
 
     /// The current spacing options for this `Ui`.
     /// Short for `ui.style().spacing`.
-    #[inline(always)]
+    #[inline]
     pub fn spacing(&self) -> &crate::style::Spacing {
         &self.style.spacing
     }
@@ -180,7 +180,7 @@ impl Ui {
 
     /// The current visuals settings of this `Ui`.
     /// Short for `ui.style().visuals`.
-    #[inline(always)]
+    #[inline]
     pub fn visuals(&self) -> &crate::Visuals {
         &self.style.visuals
     }
@@ -200,20 +200,20 @@ impl Ui {
     }
 
     /// Get a reference to the parent [`CtxRef`].
-    #[inline(always)]
+    #[inline]
     pub fn ctx(&self) -> &CtxRef {
         self.painter.ctx()
     }
 
     /// Use this to paint stuff within this `Ui`.
-    #[inline(always)]
+    #[inline]
     pub fn painter(&self) -> &Painter {
         &self.painter
     }
 
     /// If `false`, the `Ui` does not allow any interaction and
     /// the widgets in it will draw with a gray look.
-    #[inline(always)]
+    #[inline]
     pub fn is_enabled(&self) -> bool {
         self.enabled
     }
@@ -246,7 +246,7 @@ impl Ui {
     }
 
     /// If `false`, any widgets added to the `Ui` will be invisible and non-interactive.
-    #[inline(always)]
+    #[inline]
     pub fn visible(&self) -> bool {
         self.painter.visible()
     }
@@ -277,7 +277,7 @@ impl Ui {
         }
     }
 
-    #[inline(always)]
+    #[inline]
     pub fn layout(&self) -> &Layout {
         self.placer.layout()
     }
@@ -305,37 +305,42 @@ impl Ui {
     }
 
     /// Use this to paint stuff within this `Ui`.
+    #[inline]
     pub fn layer_id(&self) -> LayerId {
         self.painter().layer_id()
     }
 
     /// The `Input` of the `Context` associated with the `Ui`.
     /// Equivalent to `.ctx().input()`.
-    #[inline(always)]
+    #[inline]
     pub fn input(&self) -> &InputState {
         self.ctx().input()
     }
 
     /// The `Memory` of the `Context` associated with the `Ui`.
     /// Equivalent to `.ctx().memory()`.
+    #[inline]
     pub fn memory(&self) -> MutexGuard<'_, Memory> {
         self.ctx().memory()
     }
 
     /// The `Output` of the `Context` associated with the `Ui`.
     /// Equivalent to `.ctx().output()`.
+    #[inline]
     pub fn output(&self) -> MutexGuard<'_, Output> {
         self.ctx().output()
     }
 
     /// The `Fonts` of the `Context` associated with the `Ui`.
     /// Equivalent to `.ctx().fonts()`.
+    #[inline]
     pub fn fonts(&self) -> &Fonts {
         self.ctx().fonts()
     }
 
     /// Screen-space rectangle for clipping what we paint in this ui.
     /// This is used, for instance, to avoid painting outside a window that is smaller than its contents.
+    #[inline]
     pub fn clip_rect(&self) -> Rect {
         self.painter.clip_rect()
     }
@@ -345,6 +350,11 @@ impl Ui {
     pub fn set_clip_rect(&mut self, clip_rect: Rect) {
         self.painter.set_clip_rect(clip_rect);
     }
+
+    /// Can be used for culling: if `false`, then no part of `rect` will be visible on screen.
+    pub fn is_rect_visible(&self, rect: Rect) -> bool {
+        self.visible() && rect.intersects(self.clip_rect())
+    }
 }
 
 // ------------------------------------------------------------------------
@@ -741,7 +751,7 @@ impl Ui {
     /// If the contents overflow, more space will be allocated.
     /// When finished, the amount of space actually used (`min_rect`) will be allocated.
     /// So you can request a lot of space and then use less.
-    #[inline(always)]
+    #[inline]
     pub fn allocate_ui<R>(
         &mut self,
         desired_size: Vec2,
@@ -754,7 +764,7 @@ impl Ui {
     /// If the contents overflow, more space will be allocated.
     /// When finished, the amount of space actually used (`min_rect`) will be allocated.
     /// So you can request a lot of space and then use less.
-    #[inline(always)]
+    #[inline]
     pub fn allocate_ui_with_layout<R>(
         &mut self,
         desired_size: Vec2,
@@ -883,7 +893,7 @@ impl Ui {
     /// let response = ui.add(egui::Slider::new(&mut my_value, 0..=100));
     /// response.on_hover_text("Drag me!");
     /// ```
-    #[inline(always)]
+    #[inline]
     pub fn add(&mut self, widget: impl Widget) -> Response {
         widget.ui(self)
     }
@@ -980,7 +990,7 @@ impl Ui {
     /// This will be in addition to the [`Spacing::item_spacing`}.
     ///
     /// [`Self::min_rect`] will expand to contain the space.
-    #[inline(always)]
+    #[inline]
     pub fn add_space(&mut self, amount: f32) {
         self.placer.advance_cursor(amount);
     }
@@ -990,7 +1000,7 @@ impl Ui {
     /// Shortcut for `add(Label::new(text))`
     ///
     /// See also [`Label`].
-    #[inline(always)]
+    #[inline]
     pub fn label(&mut self, text: impl Into<WidgetText>) -> Response {
         Label::new(text).ui(self)
     }
@@ -1197,7 +1207,7 @@ impl Ui {
     }
 
     /// Shortcut for `add(Separator::default())` (see [`Separator`]).
-    #[inline(always)]
+    #[inline]
     pub fn separator(&mut self) -> Response {
         Separator::default().ui(self)
     }
@@ -1243,7 +1253,7 @@ impl Ui {
     /// Show an image here with the given size.
     ///
     /// See also [`Image`].
-    #[inline(always)]
+    #[inline]
     pub fn image(&mut self, texture_id: TextureId, size: impl Into<Vec2>) -> Response {
         Image::new(texture_id, size).ui(self)
     }
@@ -1403,7 +1413,7 @@ impl Ui {
     ///
     /// The `id_source` here be anything at all.
     // TODO: remove `id_source` argument?
-    #[inline(always)]
+    #[inline]
     pub fn indent<R>(
         &mut self,
         id_source: impl Hash,
@@ -1555,7 +1565,7 @@ impl Ui {
     /// ```
     ///
     /// See also [`Self::with_layout`] for more options.
-    #[inline(always)]
+    #[inline]
     pub fn vertical<R>(&mut self, add_contents: impl FnOnce(&mut Ui) -> R) -> InnerResponse<R> {
         self.with_layout_dyn(Layout::top_down(Align::Min), Box::new(add_contents))
     }
@@ -1750,7 +1760,7 @@ impl Ui {
         self.menu_state = menu_state;
     }
 
-    #[inline(always)]
+    #[inline]
     /// Create a menu button. Creates a button for a sub-menu when the `Ui` is inside a menu.
     ///
     /// ```
diff --git a/egui/src/widgets/button.rs b/egui/src/widgets/button.rs
index 870832ea366..f760bc8c273 100644
--- a/egui/src/widgets/button.rs
+++ b/egui/src/widgets/button.rs
@@ -144,7 +144,7 @@ impl Widget for Button {
         let (rect, response) = ui.allocate_at_least(desired_size, sense);
         response.widget_info(|| WidgetInfo::labeled(WidgetType::Button, text.text()));
 
-        if ui.clip_rect().intersects(rect) {
+        if ui.is_rect_visible(rect) {
             let visuals = ui.style().interact(&response);
             let text_pos = ui
                 .layout()
@@ -234,33 +234,36 @@ impl<'a> Widget for Checkbox<'a> {
         }
         response.widget_info(|| WidgetInfo::selected(WidgetType::Checkbox, *checked, text.text()));
 
-        // let visuals = ui.style().interact_selectable(&response, *checked); // too colorful
-        let visuals = ui.style().interact(&response);
-        let text_pos = pos2(
-            rect.min.x + button_padding.x + icon_width + icon_spacing,
-            rect.center().y - 0.5 * text.size().y,
-        );
-        let (small_icon_rect, big_icon_rect) = ui.spacing().icon_rectangles(rect);
-        ui.painter().add(epaint::RectShape {
-            rect: big_icon_rect.expand(visuals.expansion),
-            corner_radius: visuals.corner_radius,
-            fill: visuals.bg_fill,
-            stroke: visuals.bg_stroke,
-        });
-
-        if *checked {
-            // Check mark:
-            ui.painter().add(Shape::line(
-                vec![
-                    pos2(small_icon_rect.left(), small_icon_rect.center().y),
-                    pos2(small_icon_rect.center().x, small_icon_rect.bottom()),
-                    pos2(small_icon_rect.right(), small_icon_rect.top()),
-                ],
-                visuals.fg_stroke,
-            ));
+        if ui.is_rect_visible(rect) {
+            // let visuals = ui.style().interact_selectable(&response, *checked); // too colorful
+            let visuals = ui.style().interact(&response);
+            let text_pos = pos2(
+                rect.min.x + button_padding.x + icon_width + icon_spacing,
+                rect.center().y - 0.5 * text.size().y,
+            );
+            let (small_icon_rect, big_icon_rect) = ui.spacing().icon_rectangles(rect);
+            ui.painter().add(epaint::RectShape {
+                rect: big_icon_rect.expand(visuals.expansion),
+                corner_radius: visuals.corner_radius,
+                fill: visuals.bg_fill,
+                stroke: visuals.bg_stroke,
+            });
+
+            if *checked {
+                // Check mark:
+                ui.painter().add(Shape::line(
+                    vec![
+                        pos2(small_icon_rect.left(), small_icon_rect.center().y),
+                        pos2(small_icon_rect.center().x, small_icon_rect.bottom()),
+                        pos2(small_icon_rect.right(), small_icon_rect.top()),
+                    ],
+                    visuals.fg_stroke,
+                ));
+            }
+
+            text.paint_with_visuals(ui.painter(), text_pos, visuals);
         }
 
-        text.paint_with_visuals(ui.painter(), text_pos, visuals);
         response
     }
 }
@@ -331,36 +334,39 @@ impl Widget for RadioButton {
         response
             .widget_info(|| WidgetInfo::selected(WidgetType::RadioButton, checked, text.text()));
 
-        let text_pos = pos2(
-            rect.min.x + button_padding.x + icon_width + icon_spacing,
-            rect.center().y - 0.5 * text.size().y,
-        );
+        if ui.is_rect_visible(rect) {
+            let text_pos = pos2(
+                rect.min.x + button_padding.x + icon_width + icon_spacing,
+                rect.center().y - 0.5 * text.size().y,
+            );
 
-        // let visuals = ui.style().interact_selectable(&response, checked); // too colorful
-        let visuals = ui.style().interact(&response);
-
-        let (small_icon_rect, big_icon_rect) = ui.spacing().icon_rectangles(rect);
+            // let visuals = ui.style().interact_selectable(&response, checked); // too colorful
+            let visuals = ui.style().interact(&response);
 
-        let painter = ui.painter();
+            let (small_icon_rect, big_icon_rect) = ui.spacing().icon_rectangles(rect);
 
-        painter.add(epaint::CircleShape {
-            center: big_icon_rect.center(),
-            radius: big_icon_rect.width() / 2.0 + visuals.expansion,
-            fill: visuals.bg_fill,
-            stroke: visuals.bg_stroke,
-        });
+            let painter = ui.painter();
 
-        if checked {
             painter.add(epaint::CircleShape {
-                center: small_icon_rect.center(),
-                radius: small_icon_rect.width() / 3.0,
-                fill: visuals.fg_stroke.color, // Intentional to use stroke and not fill
-                // fill: ui.visuals().selection.stroke.color, // too much color
-                stroke: Default::default(),
+                center: big_icon_rect.center(),
+                radius: big_icon_rect.width() / 2.0 + visuals.expansion,
+                fill: visuals.bg_fill,
+                stroke: visuals.bg_stroke,
             });
+
+            if checked {
+                painter.add(epaint::CircleShape {
+                    center: small_icon_rect.center(),
+                    radius: small_icon_rect.width() / 3.0,
+                    fill: visuals.fg_stroke.color, // Intentional to use stroke and not fill
+                    // fill: ui.visuals().selection.stroke.color, // too much color
+                    stroke: Default::default(),
+                });
+            }
+
+            text.paint_with_visuals(ui.painter(), text_pos, visuals);
         }
 
-        text.paint_with_visuals(ui.painter(), text_pos, visuals);
         response
     }
 }
@@ -438,7 +444,7 @@ impl Widget for ImageButton {
         let (rect, response) = ui.allocate_exact_size(padded_size, sense);
         response.widget_info(|| WidgetInfo::new(WidgetType::ImageButton));
 
-        if ui.clip_rect().intersects(rect) {
+        if ui.is_rect_visible(rect) {
             let (expansion, corner_radius, fill, stroke) = if selected {
                 let selection = ui.visuals().selection;
                 (-padding, 0.0, selection.bg_fill, selection.stroke)
diff --git a/egui/src/widgets/color_picker.rs b/egui/src/widgets/color_picker.rs
index c709d1ae1cf..3fcd16097eb 100644
--- a/egui/src/widgets/color_picker.rs
+++ b/egui/src/widgets/color_picker.rs
@@ -50,19 +50,21 @@ pub fn show_color(ui: &mut Ui, color: impl Into<Hsva>, desired_size: Vec2) -> Re
 
 fn show_hsva(ui: &mut Ui, color: Hsva, desired_size: Vec2) -> Response {
     let (rect, response) = ui.allocate_at_least(desired_size, Sense::hover());
-    background_checkers(ui.painter(), rect);
-    if true {
-        let left = Rect::from_min_max(rect.left_top(), rect.center_bottom());
-        let right = Rect::from_min_max(rect.center_top(), rect.right_bottom());
-        ui.painter().rect_filled(left, 0.0, color);
-        ui.painter().rect_filled(right, 0.0, color.to_opaque());
-    } else {
-        ui.painter().add(RectShape {
-            rect,
-            corner_radius: 2.0,
-            fill: color.into(),
-            stroke: Stroke::new(3.0, color.to_opaque()),
-        });
+    if ui.is_rect_visible(rect) {
+        background_checkers(ui.painter(), rect);
+        if true {
+            let left = Rect::from_min_max(rect.left_top(), rect.center_bottom());
+            let right = Rect::from_min_max(rect.center_top(), rect.right_bottom());
+            ui.painter().rect_filled(left, 0.0, color);
+            ui.painter().rect_filled(right, 0.0, color.to_opaque());
+        } else {
+            ui.painter().add(RectShape {
+                rect,
+                corner_radius: 2.0,
+                fill: color.into(),
+                stroke: Stroke::new(3.0, color.to_opaque()),
+            });
+        }
     }
     response
 }
@@ -71,23 +73,26 @@ fn color_button(ui: &mut Ui, color: Color32, open: bool) -> Response {
     let size = ui.spacing().interact_size;
     let (rect, response) = ui.allocate_exact_size(size, Sense::click());
     response.widget_info(|| WidgetInfo::new(WidgetType::ColorButton));
-    let visuals = if open {
-        &ui.visuals().widgets.open
-    } else {
-        ui.style().interact(&response)
-    };
-    let rect = rect.expand(visuals.expansion);
 
-    background_checkers(ui.painter(), rect);
+    if ui.is_rect_visible(rect) {
+        let visuals = if open {
+            &ui.visuals().widgets.open
+        } else {
+            ui.style().interact(&response)
+        };
+        let rect = rect.expand(visuals.expansion);
 
-    let left_half = Rect::from_min_max(rect.left_top(), rect.center_bottom());
-    let right_half = Rect::from_min_max(rect.center_top(), rect.right_bottom());
-    ui.painter().rect_filled(left_half, 0.0, color);
-    ui.painter().rect_filled(right_half, 0.0, color.to_opaque());
+        background_checkers(ui.painter(), rect);
 
-    let corner_radius = visuals.corner_radius.at_most(2.0);
-    ui.painter()
-        .rect_stroke(rect, corner_radius, (2.0, visuals.bg_fill)); // fill is intentional, because default style has no border
+        let left_half = Rect::from_min_max(rect.left_top(), rect.center_bottom());
+        let right_half = Rect::from_min_max(rect.center_top(), rect.right_bottom());
+        ui.painter().rect_filled(left_half, 0.0, color);
+        ui.painter().rect_filled(right_half, 0.0, color.to_opaque());
+
+        let corner_radius = visuals.corner_radius.at_most(2.0);
+        ui.painter()
+            .rect_stroke(rect, corner_radius, (2.0, visuals.bg_fill)); // fill is intentional, because default style has no border
+    }
 
     response
 }
@@ -102,43 +107,45 @@ fn color_slider_1d(ui: &mut Ui, value: &mut f32, color_at: impl Fn(f32) -> Color
         *value = remap_clamp(mpos.x, rect.left()..=rect.right(), 0.0..=1.0);
     }
 
-    let visuals = ui.style().interact(&response);
+    if ui.is_rect_visible(rect) {
+        let visuals = ui.style().interact(&response);
 
-    background_checkers(ui.painter(), rect); // for alpha:
+        background_checkers(ui.painter(), rect); // for alpha:
 
-    {
-        // fill color:
-        let mut mesh = Mesh::default();
-        for i in 0..=N {
-            let t = i as f32 / (N as f32);
-            let color = color_at(t);
-            let x = lerp(rect.left()..=rect.right(), t);
-            mesh.colored_vertex(pos2(x, rect.top()), color);
-            mesh.colored_vertex(pos2(x, rect.bottom()), color);
-            if i < N {
-                mesh.add_triangle(2 * i + 0, 2 * i + 1, 2 * i + 2);
-                mesh.add_triangle(2 * i + 1, 2 * i + 2, 2 * i + 3);
+        {
+            // fill color:
+            let mut mesh = Mesh::default();
+            for i in 0..=N {
+                let t = i as f32 / (N as f32);
+                let color = color_at(t);
+                let x = lerp(rect.left()..=rect.right(), t);
+                mesh.colored_vertex(pos2(x, rect.top()), color);
+                mesh.colored_vertex(pos2(x, rect.bottom()), color);
+                if i < N {
+                    mesh.add_triangle(2 * i + 0, 2 * i + 1, 2 * i + 2);
+                    mesh.add_triangle(2 * i + 1, 2 * i + 2, 2 * i + 3);
+                }
             }
+            ui.painter().add(Shape::mesh(mesh));
         }
-        ui.painter().add(Shape::mesh(mesh));
-    }
 
-    ui.painter().rect_stroke(rect, 0.0, visuals.bg_stroke); // outline
+        ui.painter().rect_stroke(rect, 0.0, visuals.bg_stroke); // outline
 
-    {
-        // Show where the slider is at:
-        let x = lerp(rect.left()..=rect.right(), *value);
-        let r = rect.height() / 4.0;
-        let picked_color = color_at(*value);
-        ui.painter().add(Shape::convex_polygon(
-            vec![
-                pos2(x - r, rect.bottom()),
-                pos2(x + r, rect.bottom()),
-                pos2(x, rect.center().y),
-            ],
-            picked_color,
-            Stroke::new(visuals.fg_stroke.width, contrast_color(picked_color)),
-        ));
+        {
+            // Show where the slider is at:
+            let x = lerp(rect.left()..=rect.right(), *value);
+            let r = rect.height() / 4.0;
+            let picked_color = color_at(*value);
+            ui.painter().add(Shape::convex_polygon(
+                vec![
+                    pos2(x - r, rect.bottom()),
+                    pos2(x + r, rect.bottom()),
+                    pos2(x, rect.center().y),
+                ],
+                picked_color,
+                Stroke::new(visuals.fg_stroke.width, contrast_color(picked_color)),
+            ));
+        }
     }
 
     response
@@ -158,41 +165,43 @@ fn color_slider_2d(
         *y_value = remap_clamp(mpos.y, rect.bottom()..=rect.top(), 0.0..=1.0);
     }
 
-    let visuals = ui.style().interact(&response);
-    let mut mesh = Mesh::default();
+    if ui.is_rect_visible(rect) {
+        let visuals = ui.style().interact(&response);
+        let mut mesh = Mesh::default();
 
-    for xi in 0..=N {
-        for yi in 0..=N {
-            let xt = xi as f32 / (N as f32);
-            let yt = yi as f32 / (N as f32);
-            let color = color_at(xt, yt);
-            let x = lerp(rect.left()..=rect.right(), xt);
-            let y = lerp(rect.bottom()..=rect.top(), yt);
-            mesh.colored_vertex(pos2(x, y), color);
-
-            if xi < N && yi < N {
-                let x_offset = 1;
-                let y_offset = N + 1;
-                let tl = yi * y_offset + xi;
-                mesh.add_triangle(tl, tl + x_offset, tl + y_offset);
-                mesh.add_triangle(tl + x_offset, tl + y_offset, tl + y_offset + x_offset);
+        for xi in 0..=N {
+            for yi in 0..=N {
+                let xt = xi as f32 / (N as f32);
+                let yt = yi as f32 / (N as f32);
+                let color = color_at(xt, yt);
+                let x = lerp(rect.left()..=rect.right(), xt);
+                let y = lerp(rect.bottom()..=rect.top(), yt);
+                mesh.colored_vertex(pos2(x, y), color);
+
+                if xi < N && yi < N {
+                    let x_offset = 1;
+                    let y_offset = N + 1;
+                    let tl = yi * y_offset + xi;
+                    mesh.add_triangle(tl, tl + x_offset, tl + y_offset);
+                    mesh.add_triangle(tl + x_offset, tl + y_offset, tl + y_offset + x_offset);
+                }
             }
         }
+        ui.painter().add(Shape::mesh(mesh)); // fill
+
+        ui.painter().rect_stroke(rect, 0.0, visuals.bg_stroke); // outline
+
+        // Show where the slider is at:
+        let x = lerp(rect.left()..=rect.right(), *x_value);
+        let y = lerp(rect.bottom()..=rect.top(), *y_value);
+        let picked_color = color_at(*x_value, *y_value);
+        ui.painter().add(epaint::CircleShape {
+            center: pos2(x, y),
+            radius: rect.width() / 12.0,
+            fill: picked_color,
+            stroke: Stroke::new(visuals.fg_stroke.width, contrast_color(picked_color)),
+        });
     }
-    ui.painter().add(Shape::mesh(mesh)); // fill
-
-    ui.painter().rect_stroke(rect, 0.0, visuals.bg_stroke); // outline
-
-    // Show where the slider is at:
-    let x = lerp(rect.left()..=rect.right(), *x_value);
-    let y = lerp(rect.bottom()..=rect.top(), *y_value);
-    let picked_color = color_at(*x_value, *y_value);
-    ui.painter().add(epaint::CircleShape {
-        center: pos2(x, y),
-        radius: rect.width() / 12.0,
-        fill: picked_color,
-        stroke: Stroke::new(visuals.fg_stroke.width, contrast_color(picked_color)),
-    });
 
     response
 }
diff --git a/egui/src/widgets/hyperlink.rs b/egui/src/widgets/hyperlink.rs
index 36d165a30ed..dcc7b5056e4 100644
--- a/egui/src/widgets/hyperlink.rs
+++ b/egui/src/widgets/hyperlink.rs
@@ -78,22 +78,24 @@ impl Widget for Hyperlink {
             });
         }
 
-        let color = ui.visuals().hyperlink_color;
-        let visuals = ui.style().interact(&response);
+        if ui.is_rect_visible(response.rect) {
+            let color = ui.visuals().hyperlink_color;
+            let visuals = ui.style().interact(&response);
 
-        let underline = if response.hovered() || response.has_focus() {
-            Stroke::new(visuals.fg_stroke.width, color)
-        } else {
-            Stroke::none()
-        };
+            let underline = if response.hovered() || response.has_focus() {
+                Stroke::new(visuals.fg_stroke.width, color)
+            } else {
+                Stroke::none()
+            };
 
-        ui.painter().add(epaint::TextShape {
-            pos,
-            galley: text_galley.galley,
-            override_text_color: Some(color),
-            underline,
-            angle: 0.0,
-        });
+            ui.painter().add(epaint::TextShape {
+                pos,
+                galley: text_galley.galley,
+                override_text_color: Some(color),
+                underline,
+                angle: 0.0,
+            });
+        }
 
         response.on_hover_text(url)
     }
diff --git a/egui/src/widgets/image.rs b/egui/src/widgets/image.rs
index 0fe3529db02..3f84d049eb5 100644
--- a/egui/src/widgets/image.rs
+++ b/egui/src/widgets/image.rs
@@ -68,27 +68,29 @@ impl Image {
     }
 
     pub fn paint_at(&self, ui: &mut Ui, rect: Rect) {
-        use epaint::*;
-        let Self {
-            texture_id,
-            uv,
-            size: _,
-            bg_fill,
-            tint,
-            sense: _,
-        } = self;
+        if ui.is_rect_visible(rect) {
+            use epaint::*;
+            let Self {
+                texture_id,
+                uv,
+                size: _,
+                bg_fill,
+                tint,
+                sense: _,
+            } = self;
 
-        if *bg_fill != Default::default() {
-            let mut mesh = Mesh::default();
-            mesh.add_colored_rect(rect, *bg_fill);
-            ui.painter().add(Shape::mesh(mesh));
-        }
+            if *bg_fill != Default::default() {
+                let mut mesh = Mesh::default();
+                mesh.add_colored_rect(rect, *bg_fill);
+                ui.painter().add(Shape::mesh(mesh));
+            }
 
-        {
-            // TODO: builder pattern for Mesh
-            let mut mesh = Mesh::with_texture(*texture_id);
-            mesh.add_rect_with_uv(rect, *uv, *tint);
-            ui.painter().add(Shape::mesh(mesh));
+            {
+                // TODO: builder pattern for Mesh
+                let mut mesh = Mesh::with_texture(*texture_id);
+                mesh.add_rect_with_uv(rect, *uv, *tint);
+                ui.painter().add(Shape::mesh(mesh));
+            }
         }
     }
 }
diff --git a/egui/src/widgets/label.rs b/egui/src/widgets/label.rs
index 5f2c14a8252..d89cfcb76c5 100644
--- a/egui/src/widgets/label.rs
+++ b/egui/src/widgets/label.rs
@@ -237,27 +237,30 @@ impl Widget for Label {
     fn ui(self, ui: &mut Ui) -> Response {
         let (pos, text_galley, response) = self.layout_in_ui(ui);
         response.widget_info(|| WidgetInfo::labeled(WidgetType::Label, text_galley.text()));
-        let response_color = ui.style().interact(&response).text_color();
 
-        let underline = if response.has_focus() {
-            Stroke::new(1.0, response_color)
-        } else {
-            Stroke::none()
-        };
+        if ui.is_rect_visible(response.rect) {
+            let response_color = ui.style().interact(&response).text_color();
 
-        let override_text_color = if text_galley.galley_has_color {
-            None
-        } else {
-            Some(response_color)
-        };
-
-        ui.painter().add(epaint::TextShape {
-            pos,
-            galley: text_galley.galley,
-            override_text_color,
-            underline,
-            angle: 0.0,
-        });
+            let underline = if response.has_focus() {
+                Stroke::new(1.0, response_color)
+            } else {
+                Stroke::none()
+            };
+
+            let override_text_color = if text_galley.galley_has_color {
+                None
+            } else {
+                Some(response_color)
+            };
+
+            ui.painter().add(epaint::TextShape {
+                pos,
+                galley: text_galley.galley,
+                override_text_color,
+                underline,
+                angle: 0.0,
+            });
+        }
 
         response
     }
diff --git a/egui/src/widgets/progress_bar.rs b/egui/src/widgets/progress_bar.rs
index 0ca87dd4f5c..9f277aa3ab5 100644
--- a/egui/src/widgets/progress_bar.rs
+++ b/egui/src/widgets/progress_bar.rs
@@ -71,72 +71,77 @@ impl Widget for ProgressBar {
         let height = ui.spacing().interact_size.y;
         let (outer_rect, response) =
             ui.allocate_exact_size(vec2(desired_width, height), Sense::hover());
-        let visuals = ui.style().visuals.clone();
-        let corner_radius = outer_rect.height() / 2.0;
-        ui.painter().rect(
-            outer_rect,
-            corner_radius,
-            visuals.extreme_bg_color,
-            Stroke::none(),
-        );
-        let inner_rect = Rect::from_min_size(
-            outer_rect.min,
-            vec2(
-                (outer_rect.width() * progress).at_least(outer_rect.height()),
-                outer_rect.height(),
-            ),
-        );
-
-        let (dark, bright) = (0.7, 1.0);
-        let color_factor = if animate {
-            lerp(dark..=bright, ui.input().time.cos().abs())
-        } else {
-            bright
-        };
-
-        ui.painter().rect(
-            inner_rect,
-            corner_radius,
-            Color32::from(Rgba::from(visuals.selection.bg_fill) * color_factor as f32),
-            Stroke::none(),
-        );
 
-        if animate {
-            let n_points = 20;
-            let start_angle = ui.input().time as f64 * 360f64.to_radians();
-            let end_angle = start_angle + 240f64.to_radians() * ui.input().time.sin();
-            let circle_radius = corner_radius - 2.0;
-            let points: Vec<Pos2> = (0..n_points)
-                .map(|i| {
-                    let angle = lerp(start_angle..=end_angle, i as f64 / n_points as f64);
-                    let (sin, cos) = angle.sin_cos();
-                    inner_rect.right_center()
-                        + circle_radius * vec2(cos as f32, sin as f32)
-                        + vec2(-corner_radius, 0.0)
-                })
-                .collect();
-            ui.painter().add(Shape::line(
-                points,
-                Stroke::new(2.0, visuals.faint_bg_color),
-            ));
-        }
+        if ui.is_rect_visible(response.rect) {
+            let visuals = ui.style().visuals.clone();
+            let corner_radius = outer_rect.height() / 2.0;
+            ui.painter().rect(
+                outer_rect,
+                corner_radius,
+                visuals.extreme_bg_color,
+                Stroke::none(),
+            );
+            let inner_rect = Rect::from_min_size(
+                outer_rect.min,
+                vec2(
+                    (outer_rect.width() * progress).at_least(outer_rect.height()),
+                    outer_rect.height(),
+                ),
+            );
 
-        if let Some(text_kind) = text {
-            let text = match text_kind {
-                ProgressBarText::Custom(text) => text,
-                ProgressBarText::Percentage => format!("{}%", (progress * 100.0) as usize).into(),
+            let (dark, bright) = (0.7, 1.0);
+            let color_factor = if animate {
+                lerp(dark..=bright, ui.input().time.cos().abs())
+            } else {
+                bright
             };
-            let galley = text.into_galley(ui, Some(false), f32::INFINITY, TextStyle::Button);
-            let text_pos = outer_rect.left_center() - Vec2::new(0.0, galley.size().y / 2.0)
-                + vec2(ui.spacing().item_spacing.x, 0.0);
-            let text_color = visuals
-                .override_text_color
-                .unwrap_or(visuals.selection.stroke.color);
-            galley.paint_with_fallback_color(
-                &ui.painter().sub_region(outer_rect),
-                text_pos,
-                text_color,
+
+            ui.painter().rect(
+                inner_rect,
+                corner_radius,
+                Color32::from(Rgba::from(visuals.selection.bg_fill) * color_factor as f32),
+                Stroke::none(),
             );
+
+            if animate {
+                let n_points = 20;
+                let start_angle = ui.input().time as f64 * 360f64.to_radians();
+                let end_angle = start_angle + 240f64.to_radians() * ui.input().time.sin();
+                let circle_radius = corner_radius - 2.0;
+                let points: Vec<Pos2> = (0..n_points)
+                    .map(|i| {
+                        let angle = lerp(start_angle..=end_angle, i as f64 / n_points as f64);
+                        let (sin, cos) = angle.sin_cos();
+                        inner_rect.right_center()
+                            + circle_radius * vec2(cos as f32, sin as f32)
+                            + vec2(-corner_radius, 0.0)
+                    })
+                    .collect();
+                ui.painter().add(Shape::line(
+                    points,
+                    Stroke::new(2.0, visuals.faint_bg_color),
+                ));
+            }
+
+            if let Some(text_kind) = text {
+                let text = match text_kind {
+                    ProgressBarText::Custom(text) => text,
+                    ProgressBarText::Percentage => {
+                        format!("{}%", (progress * 100.0) as usize).into()
+                    }
+                };
+                let galley = text.into_galley(ui, Some(false), f32::INFINITY, TextStyle::Button);
+                let text_pos = outer_rect.left_center() - Vec2::new(0.0, galley.size().y / 2.0)
+                    + vec2(ui.spacing().item_spacing.x, 0.0);
+                let text_color = visuals
+                    .override_text_color
+                    .unwrap_or(visuals.selection.stroke.color);
+                galley.paint_with_fallback_color(
+                    &ui.painter().sub_region(outer_rect),
+                    text_pos,
+                    text_color,
+                );
+            }
         }
 
         response
diff --git a/egui/src/widgets/selected_label.rs b/egui/src/widgets/selected_label.rs
index 8bc4863ba18..ea6daef324b 100644
--- a/egui/src/widgets/selected_label.rs
+++ b/egui/src/widgets/selected_label.rs
@@ -58,22 +58,25 @@ impl Widget for SelectableLabel {
             WidgetInfo::selected(WidgetType::SelectableLabel, selected, text.text())
         });
 
-        let text_pos = ui
-            .layout()
-            .align_size_within_rect(text.size(), rect.shrink2(button_padding))
-            .min;
+        if ui.is_rect_visible(response.rect) {
+            let text_pos = ui
+                .layout()
+                .align_size_within_rect(text.size(), rect.shrink2(button_padding))
+                .min;
 
-        let visuals = ui.style().interact_selectable(&response, selected);
+            let visuals = ui.style().interact_selectable(&response, selected);
 
-        if selected || response.hovered() || response.has_focus() {
-            let rect = rect.expand(visuals.expansion);
+            if selected || response.hovered() || response.has_focus() {
+                let rect = rect.expand(visuals.expansion);
 
-            let corner_radius = 2.0;
-            ui.painter()
-                .rect(rect, corner_radius, visuals.bg_fill, visuals.bg_stroke);
+                let corner_radius = 2.0;
+                ui.painter()
+                    .rect(rect, corner_radius, visuals.bg_fill, visuals.bg_stroke);
+            }
+
+            text.paint_with_visuals(ui.painter(), text_pos, &visuals);
         }
 
-        text.paint_with_visuals(ui.painter(), text_pos, &visuals);
         response
     }
 }
diff --git a/egui/src/widgets/separator.rs b/egui/src/widgets/separator.rs
index ac679286498..b8271450be6 100644
--- a/egui/src/widgets/separator.rs
+++ b/egui/src/widgets/separator.rs
@@ -68,19 +68,23 @@ impl Widget for Separator {
         };
 
         let (rect, response) = ui.allocate_at_least(size, Sense::hover());
-        let points = if is_horizontal_line {
-            [
-                pos2(rect.left(), rect.center().y),
-                pos2(rect.right(), rect.center().y),
-            ]
-        } else {
-            [
-                pos2(rect.center().x, rect.top()),
-                pos2(rect.center().x, rect.bottom()),
-            ]
-        };
-        let stroke = ui.visuals().widgets.noninteractive.bg_stroke;
-        ui.painter().line_segment(points, stroke);
+
+        if ui.is_rect_visible(response.rect) {
+            let points = if is_horizontal_line {
+                [
+                    pos2(rect.left(), rect.center().y),
+                    pos2(rect.right(), rect.center().y),
+                ]
+            } else {
+                [
+                    pos2(rect.center().x, rect.top()),
+                    pos2(rect.center().x, rect.bottom()),
+                ]
+            };
+            let stroke = ui.visuals().widgets.noninteractive.bg_stroke;
+            ui.painter().line_segment(points, stroke);
+        }
+
         response
     }
 }
diff --git a/egui/src/widgets/slider.rs b/egui/src/widgets/slider.rs
index adca4ddf445..fc38fffbd3e 100644
--- a/egui/src/widgets/slider.rs
+++ b/egui/src/widgets/slider.rs
@@ -320,7 +320,7 @@ impl<'a> Slider<'a> {
         }
 
         // Paint it:
-        {
+        if ui.is_rect_visible(response.rect) {
             let value = self.get_value();
 
             let rail_radius = ui
diff --git a/egui/src/widgets/text_edit/builder.rs b/egui/src/widgets/text_edit/builder.rs
index 0d650d6fa11..a2a20d5b885 100644
--- a/egui/src/widgets/text_edit/builder.rs
+++ b/egui/src/widgets/text_edit/builder.rs
@@ -507,41 +507,43 @@ impl<'t> TextEdit<'t> {
             text_draw_pos -= vec2(offset_x, 0.0);
         }
 
-        painter.galley(text_draw_pos, galley.clone());
+        if ui.is_rect_visible(rect) {
+            painter.galley(text_draw_pos, galley.clone());
 
-        if text.as_ref().is_empty() && !hint_text.is_empty() {
-            let hint_text_color = ui.visuals().weak_text_color();
-            let galley = if multiline {
-                hint_text.into_galley(ui, Some(true), desired_size.x, text_style)
-            } else {
-                hint_text.into_galley(ui, Some(false), f32::INFINITY, text_style)
-            };
-            galley.paint_with_fallback_color(&painter, response.rect.min, hint_text_color);
-        }
+            if text.as_ref().is_empty() && !hint_text.is_empty() {
+                let hint_text_color = ui.visuals().weak_text_color();
+                let galley = if multiline {
+                    hint_text.into_galley(ui, Some(true), desired_size.x, text_style)
+                } else {
+                    hint_text.into_galley(ui, Some(false), f32::INFINITY, text_style)
+                };
+                galley.paint_with_fallback_color(&painter, response.rect.min, hint_text_color);
+            }
 
-        if ui.memory().has_focus(id) {
-            if let Some(cursor_range) = state.cursor_range(&*galley) {
-                // We paint the cursor on top of the text, in case
-                // the text galley has backgrounds (as e.g. `code` snippets in markup do).
-                paint_cursor_selection(ui, &painter, text_draw_pos, &galley, &cursor_range);
-                paint_cursor_end(
-                    ui,
-                    row_height,
-                    &painter,
-                    text_draw_pos,
-                    &galley,
-                    &cursor_range.primary,
-                );
-
-                if interactive && text.is_mutable() {
-                    // egui_web uses `text_cursor_pos` when showing IME,
-                    // so only set it when text is editable!
-                    ui.ctx().output().text_cursor_pos = Some(
-                        galley
-                            .pos_from_cursor(&cursor_range.primary)
-                            .translate(response.rect.min.to_vec2())
-                            .left_top(),
+            if ui.memory().has_focus(id) {
+                if let Some(cursor_range) = state.cursor_range(&*galley) {
+                    // We paint the cursor on top of the text, in case
+                    // the text galley has backgrounds (as e.g. `code` snippets in markup do).
+                    paint_cursor_selection(ui, &painter, text_draw_pos, &galley, &cursor_range);
+                    paint_cursor_end(
+                        ui,
+                        row_height,
+                        &painter,
+                        text_draw_pos,
+                        &galley,
+                        &cursor_range.primary,
                     );
+
+                    if interactive && text.is_mutable() {
+                        // egui_web uses `text_cursor_pos` when showing IME,
+                        // so only set it when text is editable and visible!
+                        ui.ctx().output().text_cursor_pos = Some(
+                            galley
+                                .pos_from_cursor(&cursor_range.primary)
+                                .translate(response.rect.min.to_vec2())
+                                .left_top(),
+                        );
+                    }
                 }
             }
         }
diff --git a/egui_demo_lib/src/apps/demo/toggle_switch.rs b/egui_demo_lib/src/apps/demo/toggle_switch.rs
index 9d6150210f0..8a2d533654a 100644
--- a/egui_demo_lib/src/apps/demo/toggle_switch.rs
+++ b/egui_demo_lib/src/apps/demo/toggle_switch.rs
@@ -41,24 +41,27 @@ pub fn toggle_ui(ui: &mut egui::Ui, on: &mut bool) -> egui::Response {
     response.widget_info(|| egui::WidgetInfo::selected(egui::WidgetType::Checkbox, *on, ""));
 
     // 4. Paint!
-    // First let's ask for a simple animation from egui.
-    // egui keeps track of changes in the boolean associated with the id and
-    // returns an animated value in the 0-1 range for how much "on" we are.
-    let how_on = ui.ctx().animate_bool(response.id, *on);
-    // We will follow the current style by asking
-    // "how should something that is being interacted with be painted?".
-    // This will, for instance, give us different colors when the widget is hovered or clicked.
-    let visuals = ui.style().interact_selectable(&response, *on);
-    // All coordinates are in absolute screen coordinates so we use `rect` to place the elements.
-    let rect = rect.expand(visuals.expansion);
-    let radius = 0.5 * rect.height();
-    ui.painter()
-        .rect(rect, radius, visuals.bg_fill, visuals.bg_stroke);
-    // Paint the circle, animating it from left to right with `how_on`:
-    let circle_x = egui::lerp((rect.left() + radius)..=(rect.right() - radius), how_on);
-    let center = egui::pos2(circle_x, rect.center().y);
-    ui.painter()
-        .circle(center, 0.75 * radius, visuals.bg_fill, visuals.fg_stroke);
+    // Make sure we need to paint:
+    if ui.is_rect_visible(rect) {
+        // Let's ask for a simple animation from egui.
+        // egui keeps track of changes in the boolean associated with the id and
+        // returns an animated value in the 0-1 range for how much "on" we are.
+        let how_on = ui.ctx().animate_bool(response.id, *on);
+        // We will follow the current style by asking
+        // "how should something that is being interacted with be painted?".
+        // This will, for instance, give us different colors when the widget is hovered or clicked.
+        let visuals = ui.style().interact_selectable(&response, *on);
+        // All coordinates are in absolute screen coordinates so we use `rect` to place the elements.
+        let rect = rect.expand(visuals.expansion);
+        let radius = 0.5 * rect.height();
+        ui.painter()
+            .rect(rect, radius, visuals.bg_fill, visuals.bg_stroke);
+        // Paint the circle, animating it from left to right with `how_on`:
+        let circle_x = egui::lerp((rect.left() + radius)..=(rect.right() - radius), how_on);
+        let center = egui::pos2(circle_x, rect.center().y);
+        ui.painter()
+            .circle(center, 0.75 * radius, visuals.bg_fill, visuals.fg_stroke);
+    }
 
     // All done! Return the interaction response so the user can check what happened
     // (hovered, clicked, ...) and maybe show a tooltip:
@@ -76,16 +79,18 @@ fn toggle_ui_compact(ui: &mut egui::Ui, on: &mut bool) -> egui::Response {
     }
     response.widget_info(|| egui::WidgetInfo::selected(egui::WidgetType::Checkbox, *on, ""));
 
-    let how_on = ui.ctx().animate_bool(response.id, *on);
-    let visuals = ui.style().interact_selectable(&response, *on);
-    let rect = rect.expand(visuals.expansion);
-    let radius = 0.5 * rect.height();
-    ui.painter()
-        .rect(rect, radius, visuals.bg_fill, visuals.bg_stroke);
-    let circle_x = egui::lerp((rect.left() + radius)..=(rect.right() - radius), how_on);
-    let center = egui::pos2(circle_x, rect.center().y);
-    ui.painter()
-        .circle(center, 0.75 * radius, visuals.bg_fill, visuals.fg_stroke);
+    if ui.is_rect_visible(rect) {
+        let how_on = ui.ctx().animate_bool(response.id, *on);
+        let visuals = ui.style().interact_selectable(&response, *on);
+        let rect = rect.expand(visuals.expansion);
+        let radius = 0.5 * rect.height();
+        ui.painter()
+            .rect(rect, radius, visuals.bg_fill, visuals.bg_stroke);
+        let circle_x = egui::lerp((rect.left() + radius)..=(rect.right() - radius), how_on);
+        let center = egui::pos2(circle_x, rect.center().y);
+        ui.painter()
+            .circle(center, 0.75 * radius, visuals.bg_fill, visuals.fg_stroke);
+    }
 
     response
 }