🔧 Schedule requestAnimationFrame on render finish

🔧 Show message and button to reload the page when WebGL context is lost
🐛 Fix nested frames border clipping
2026-01-14 09:20:01 -05:00 · 2026-01-14 12:05:51 +01:00 · 2026-01-14 11:10:03 +01:00 · 2026-01-14 11:10:03 +01:00 · 2026-01-14 11:10:03 +01:00 · 2026-01-14 11:10:03 +01:00
25 changed files with 2523 additions and 1229 deletions
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -29,7 +29,7 @@
 - Fix missing text color token from selected shapes in selected colors list [Taiga #12956](https://tree.taiga.io/project/penpot/issue/12956)
 - Fix dropdown option width in Guides columns dropdown [Taiga #12959](https://tree.taiga.io/project/penpot/issue/12959)
 - Fix typos on download modal [Taiga #12865](https://tree.taiga.io/project/penpot/issue/12865)
-
+- Fix problem with text editor maintaining previous styles [Taiga #12835](https://tree.taiga.io/project/penpot/issue/12835)

 ## 2.12.1

--- a/frontend/playwright/data/render-wasm/get-file-frame-nested-clipping.json
+++ b/frontend/playwright/data/render-wasm/get-file-frame-nested-clipping.json
--- a/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-a-file-with-nested-clipping-frames-1.png
+++ b/frontend/playwright/ui/render-wasm-specs/shapes.spec.js-snapshots/Renders-a-file-with-nested-clipping-frames-1.png
--- a/frontend/resources/wasm-playground/clips.html
+++ b/frontend/resources/wasm-playground/clips.html
@@ -23,7 +23,7 @@
 <body>
  <canvas id="canvas"></canvas>
  <script type="module">
-    import initWasmModule from '/js/render_wasm.js';
+    import initWasmModule from '/js/render-wasm.js';
    import {
      init, addShapeSolidFill, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
      getRandomFloat, useShape, setShapeChildren, setupInteraction, addShapeSolidStrokeFill,
--- a/frontend/resources/wasm-playground/masks.html
+++ b/frontend/resources/wasm-playground/masks.html
@@ -23,7 +23,7 @@
 <body>
  <canvas id="canvas"></canvas>
  <script type="module">
-    import initWasmModule from '/js/render_wasm.js';
+    import initWasmModule from '/js/render-wasm.js';
    import {
      init, addShapeSolidFill, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
      getRandomFloat, useShape, setShapeChildren, setupInteraction, set_parent
--- a/frontend/resources/wasm-playground/paths.html
+++ b/frontend/resources/wasm-playground/paths.html
@@ -23,7 +23,7 @@
 <body>
  <canvas id="canvas"></canvas>
  <script type="module">
-    import initWasmModule from '/js/render_wasm.js';
+    import initWasmModule from '/js/render-wasm.js';
    import {
      init, addShapeSolidFill, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
      getRandomFloat, useShape, setShapeChildren, setupInteraction, set_parent, draw_star,
--- a/frontend/resources/wasm-playground/plus.html
+++ b/frontend/resources/wasm-playground/plus.html
@@ -23,7 +23,7 @@
 <body>
  <canvas id="canvas"></canvas>
  <script type="module">
-    import initWasmModule from '/js/render_wasm.js';
+    import initWasmModule from '/js/render-wasm.js';
    import {
      init, addShapeSolidFill, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
      getRandomFloat, useShape, setShapeChildren, setupInteraction, set_parent, allocBytes,
--- a/frontend/resources/wasm-playground/rects.html
+++ b/frontend/resources/wasm-playground/rects.html
@@ -23,7 +23,7 @@
 <body>
  <canvas id="canvas"></canvas>
  <script type="module">
-    import initWasmModule from '/js/render_wasm.js';
+    import initWasmModule from '/js/render-wasm.js';
    import {
      init, addShapeSolidFill, assignCanvas, hexToU32ARGB, getRandomInt, getRandomColor,
      getRandomFloat, useShape, setShapeChildren, setupInteraction, addShapeSolidStrokeFill
--- a/frontend/resources/wasm-playground/texts.html
+++ b/frontend/resources/wasm-playground/texts.html
@@ -23,7 +23,7 @@
 <body>
  <canvas id="canvas"></canvas>
  <script type="module">
-    import initWasmModule from '/js/render_wasm.js';
+    import initWasmModule from '/js/render-wasm.js';
    import {
      init, assignCanvas, setupInteraction, useShape, setShapeChildren, addTextShape, hexToU32ARGB,getRandomInt, getRandomColor, getRandomFloat, addShapeSolidFill, addShapeSolidStrokeFill
    } from './js/lib.js';
@@ -102,4 +102,4 @@
    });
  </script>
 </body>
-</html>
+</html>
--- a/frontend/src/app/main/ui/ds/z-index.scss
+++ b/frontend/src/app/main/ui/ds/z-index.scss
@@ -10,6 +10,7 @@ $z-index-200: 200;
 $z-index-300: 300;
 $z-index-400: 400;
 $z-index-500: 500;
+$z-index-600: 600;

 :global(:root) {
  --z-index-auto: #{$z-index-auto}; // Index for elements such as workspace, rulers ...
@@ -18,4 +19,5 @@ $z-index-500: 500;
  --z-index-set: #{$z-index-300}; // Index for configuration elements like modals, color picker, grid edition elements
  --z-index-dropdown: #{$z-index-400}; // Index for dropdown like elements, selects, menus, dropdowns
  --z-index-notifications: #{$z-index-500}; // Index for notification
+  --z-index-loaders: #{$z-index-600}; // Index for loaders
 }
--- a/frontend/src/app/main/ui/static.cljs
+++ b/frontend/src/app/main/ui/static.cljs
@@ -308,6 +308,16 @@
     [:div {:class (stl/css :sign-info)}
      [:button {:on-click on-click} (tr "labels.retry")]]]))

+(mf/defc webgl-context-lost*
+  []
+  (let [on-reload (mf/use-fn #(js/location.reload))]
+    [:> error-container* {}
+     [:div {:class (stl/css :main-message)} (tr "labels.webgl-context-lost.main-message")]
+     [:div {:class (stl/css :desc-message)} (tr "labels.webgl-context-lost.desc-message")]
+     [:div {:class (stl/css :buttons-container)}
+      [:> button* {:variant "primary" :on-click on-reload}
+       (tr "labels.reload-page")]]]))
+
 (defn- generate-report
  [data]
  (try
@@ -437,6 +447,7 @@
                       (rx/of default)
                       (rx/throw cause)))))))

+
 (mf/defc exception-section*
  {::mf/private true}
  [{:keys [data route] :as props}]
@@ -469,6 +480,9 @@
      :service-unavailable
      [:> service-unavailable*]

+      :webgl-context-lost
+      [:> webgl-context-lost*]
+
      [:> internal-error* props])))

 (mf/defc context-wrapper*
--- a/frontend/src/app/main/ui/workspace.cljs
+++ b/frontend/src/app/main/ui/workspace.cljs
@@ -217,6 +217,10 @@

        design-tokens?   (features/use-feature "design-tokens/v1")

+        wasm-renderer-enabled? (features/use-feature "render-wasm/v1")
+
+        first-frame-rendered?  (mf/use-state false)
+
        background-color (:background-color wglobal)]

    (mf/with-effect []
@@ -241,6 +245,17 @@
      (when (and file-loaded? (not page-id))
        (st/emit! (dcm/go-to-workspace :file-id file-id ::rt/replace true))))

+    (mf/with-effect [file-id page-id]
+      (reset! first-frame-rendered? false))
+
+    (mf/with-effect []
+      (let [handle-wasm-render
+            (fn [_]
+              (reset! first-frame-rendered? true))
+            listener-key (events/listen globals/document "penpot:wasm:render" handle-wasm-render)]
+        (fn []
+          (events/unlistenByKey listener-key))))
+
    [:> (mf/provider ctx/current-project-id) {:value project-id}
     [:> (mf/provider ctx/current-file-id) {:value file-id}
      [:> (mf/provider ctx/current-page-id) {:value page-id}
@@ -249,15 +264,18 @@
         [:> modal-container*]
         [:section {:class (stl/css :workspace)
                    :style {:background-color background-color
-                            :touch-action "none"}}
+                            :touch-action "none"
+                            :position "relative"}}
          [:> context-menu*]
-          (if (and file-loaded? page-id)
+          (when (and file-loaded? page-id)
            [:> workspace-inner*
             {:page-id page-id
              :file-id file-id
              :file file
              :wglobal wglobal
-              :layout layout}]
+              :layout layout}])
+          (when (or (not (and file-loaded? page-id))
+                    (and wasm-renderer-enabled? (not @first-frame-rendered?)))
            [:> workspace-loader*])]]]]]]))

 (mf/defc workspace-page*
--- a/frontend/src/app/main/ui/workspace.scss
+++ b/frontend/src/app/main/ui/workspace.scss
@@ -20,7 +20,13 @@
 }

 .workspace-loader {
-  grid-area: viewport;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: var(--z-index-loaders);
+  background-color: var(--color-background-primary);
 }

 .workspace-content {
--- a/frontend/src/app/render_wasm/api.cljs
+++ b/frontend/src/app/render_wasm/api.cljs
@@ -10,6 +10,7 @@
   ["react-dom/server" :as rds]
   [app.common.data :as d]
   [app.common.data.macros :as dm]
+   [app.common.exceptions :as ex]
   [app.common.files.helpers :as cfh]
   [app.common.logging :as log]
   [app.common.math :as mth]
@@ -21,7 +22,6 @@
   [app.common.types.text :as txt]
   [app.common.uuid :as uuid]
   [app.config :as cf]
-   [app.main.data.render-wasm :as drw]
   [app.main.refs :as refs]
   [app.main.render :as render]
   [app.main.store :as st]
@@ -207,8 +207,9 @@
 (defn set-shape-children
  [children]
  (perf/begin-measure "set-shape-children")
-  (let [children (into [] (filter uuid?) children)]
-    (case (count children)
+  (let [children (into [] (filter uuid?) children)
+        cnt      (count children)]
+    (case cnt
      0
      (h/call wasm/internal-module "_set_children_0")

@@ -263,16 +264,16 @@
                (aget c5 0) (aget c5 1) (aget c5 2) (aget c5 3)))

      ;; Dynamic call for children > 5
-      (let [heap   (mem/get-heap-u32)
-            size   (mem/get-alloc-size children UUID-U8-SIZE)
-            offset (mem/alloc->offset-32 size)]
-        (reduce
-         (fn [offset id]
-           (mem.h32/write-uuid offset heap id))
-         offset
-         children)
+      (let [size   (mem/get-alloc-size children UUID-U8-SIZE)
+            offset (mem/alloc->offset-32 size)
+            heap   (mem/get-heap-u32)]
+        ;; Write UUIDs sequentially using the allocator-managed offset
+        (reduce (fn [off id]
+                  (mem.h32/write-uuid off heap id))
+                offset
+                children)
        (h/call wasm/internal-module "_set_children"))))
-  (perf/end-measure "set-shape-children")
+  (perf/end-measure "set-shape-children" {:count (count children)})
  nil)

 (defn- get-string-length
@@ -879,11 +880,15 @@
    (= result 1)))

 (def render-finish
-  (letfn [(do-render [ts]
-            (perf/begin-measure "render-finish")
-            (h/call wasm/internal-module "_set_view_end")
-            (render ts)
-            (perf/end-measure "render-finish"))]
+  ;; Debounced + scheduled requestAnimationFrame render to reduce
+  ;; long main-thread stalls
+  (letfn [(do-render []
+            (js/requestAnimationFrame
+             (fn [ts]
+               (perf/begin-measure "render-finish")
+               (h/call wasm/internal-module "_set_view_end")
+               (render ts)
+               (perf/end-measure "render-finish"))))]
    (fns/debounce do-render DEBOUNCE_DELAY_MS)))

 (def render-pan
@@ -1236,7 +1241,8 @@
  (dom/prevent-default event)
  (reset! wasm/context-lost? true)
  (log/warn :hint "WebGL context lost")
-  (st/emit! (drw/context-lost)))
+  (ex/raise :type :webgl-context-lost
+            :hint "WebGL context lost"))

 (defn init-canvas-context
  [canvas]
--- a/frontend/text-editor/src/editor/controllers/SelectionController.js
+++ b/frontend/text-editor/src/editor/controllers/SelectionController.js
@@ -242,7 +242,6 @@ export class SelectionController extends EventTarget {
        continue;
      }
      let styleValue = element.style.getPropertyValue(styleName);
-
      if (styleName === "font-family") {
        styleValue = sanitizeFontFamily(styleValue);
      }
@@ -277,22 +276,29 @@ export class SelectionController extends EventTarget {
    this.#applyDefaultStylesToCurrentStyle();
    const root = startNode.parentElement.parentElement.parentElement;
    this.#applyStylesFromElementToCurrentStyle(root);
-    // FIXME: I don't like this approximation. Having to iterate nodes twice
-    // is bad for performance. I think we need another way of "computing"
-    // the cascade.
-    for (const textNode of this.#textNodeIterator.iterateFrom(
-      startNode,
-      endNode,
-    )) {
-      const paragraph = textNode.parentElement.parentElement;
+    if (startNode === endNode) {
+      const paragraph = startNode.parentElement.parentElement;
      this.#applyStylesFromElementToCurrentStyle(paragraph);
-    }
-    for (const textNode of this.#textNodeIterator.iterateFrom(
-      startNode,
-      endNode,
-    )) {
-      const textSpan = textNode.parentElement;
-      this.#mergeStylesFromElementToCurrentStyle(textSpan);
+      const textSpan = startNode.parentElement;
+      this.#applyStylesFromElementToCurrentStyle(textSpan);
+    } else {
+      // FIXME: I don't like this approximation. Having to iterate nodes twice
+      // is bad for performance. I think we need another way of "computing"
+      // the cascade.
+      for (const textNode of this.#textNodeIterator.iterateFrom(
+        startNode,
+        endNode,
+      )) {
+        const paragraph = textNode.parentElement.parentElement;
+        this.#applyStylesFromElementToCurrentStyle(paragraph);
+      }
+      for (const textNode of this.#textNodeIterator.iterateFrom(
+        startNode,
+        endNode,
+      )) {
+        const textSpan = textNode.parentElement;
+        this.#mergeStylesFromElementToCurrentStyle(textSpan);
+      }
    }
    return this;
  }
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -2521,6 +2521,9 @@ msgstr "Release notes"
 msgid "labels.reload-file"
 msgstr "Reload file"

+msgid "labels.reload-page"
+msgstr "Reload page"
+
 #: src/app/main/ui/workspace/libraries.cljs, src/app/main/ui/dashboard/team.cljs
 #, unused
 msgid "labels.remove"
@@ -7551,6 +7554,10 @@ msgstr "Remap Token References"
 msgid "workspace.tokens.renaming-token-from-to"
 msgstr "Renaming token from '%s' to '%s'"

+#: src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs
+msgid "workspace.tokens.warning-name-change"
+msgstr "Renaming this token will break any reference to its old name"
+
 #: src/app/main/ui/workspace/tokens/remapping_modal.cljs
 msgid "workspace.tokens.references-found"
 msgstr "%s references found in your design"
@@ -8471,6 +8478,12 @@ msgstr "Recent"
 msgid "labels.deleted"
 msgstr "Deleted"

+msgid "labels.webgl-context-lost.main-message"
+msgstr "Oops! The canvas context was lost"
+
+msgid "labels.webgl-context-lost.desc-message"
+msgstr "WebGL has stopped working. Please reload the page to reset it"
+
 msgid "dashboard.restore-all-deleted-button"
 msgstr "Restore All"

--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@@ -2502,6 +2502,9 @@ msgstr "Notas de versión"
 msgid "labels.reload-file"
 msgstr "Recargar archivo"

+msgid "labels.reload-page"
+msgstr "Recargar página"
+
 #: src/app/main/ui/workspace/libraries.cljs, src/app/main/ui/dashboard/team.cljs
 #, unused
 msgid "labels.remove"
@@ -4428,6 +4431,10 @@ msgstr "Actualizar referencias de token"
 msgid "workspace.tokens.renaming-token-from-to"
 msgstr "Renombrando el token de '%s' a '%s'"

+#: src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs
+msgid "workspace.tokens.warning-name-change"
+msgstr "Cambiar el nombre de este token romperá cualquier referencia a su nombre anterior."
+
 #: src/app/main/ui/workspace/tokens/remapping_modal.cljs
 msgid "workspace.tokens.references-found"
 msgstr "%s referencias encontradas en tu diseño"
@@ -8324,6 +8331,12 @@ msgstr "Recientes"
 msgid "labels.deleted"
 msgstr "Eliminados"

+msgid "labels.webgl-context-lost.main-message"
+msgstr "Ups! Se ha perdido el contexto del canvas"
+
+msgid "labels.webgl-context-lost.desc-message"
+msgstr "WebGL ha dejado de funcionar. Por favor, recarga la página para restaurarlo"
+
 msgid "dashboard.restore-all-deleted-button"
 msgstr "Restaurar todo"

--- a/render-wasm/src/render.rs
+++ b/render-wasm/src/render.rs
@@ -10,7 +10,6 @@ mod shadows;
 mod strokes;
 mod surfaces;
 pub mod text;
-
 mod ui;

 use skia_safe::{self as skia, Matrix, RRect, Rect};
@@ -53,6 +52,25 @@ pub struct NodeRenderState {
    mask: bool,
 }

+/// Get simplified children of a container, flattening nested flattened containers
+fn get_simplified_children<'a>(tree: ShapesPoolRef<'a>, shape: &'a Shape) -> Vec<Uuid> {
+    let mut result = Vec::new();
+
+    for child_id in shape.children_ids_iter(false) {
+        if let Some(child) = tree.get(child_id) {
+            if child.can_flatten() {
+                // Child is flattened: recursively get its simplified children
+                result.extend(get_simplified_children(tree, child));
+            } else {
+                // Child is not flattened: add it directly
+                result.push(*child_id);
+            }
+        }
+    }
+
+    result
+}
+
 impl NodeRenderState {
    pub fn is_root(&self) -> bool {
        self.id.is_nil()
@@ -276,6 +294,10 @@ pub(crate) struct RenderState {
    /// where we must render shapes without inheriting ancestor layer blurs. Toggle it through
    /// `with_nested_blurs_suppressed` to ensure it's always restored.
    pub ignore_nested_blurs: bool,
+    /// Cached root_ids and root_ids_map to avoid recalculating them every frame
+    /// These are invalidated when the tree structure changes
+    cached_root_ids: Option<Vec<Uuid>>,
+    cached_root_ids_map: Option<std::collections::HashMap<Uuid, usize>>,
 }

 pub fn get_cache_size(viewbox: Viewbox, scale: f32) -> skia::ISize {
@@ -348,6 +370,8 @@ impl RenderState {
            focus_mode: FocusMode::new(),
            touched_ids: HashSet::default(),
            ignore_nested_blurs: false,
+            cached_root_ids: None,
+            cached_root_ids_map: None,
        }
    }

@@ -398,12 +422,7 @@ impl RenderState {
    }

    fn frame_clip_layer_blur(shape: &Shape) -> Option<Blur> {
-        match shape.shape_type {
-            Type::Frame(_) if shape.clip() => shape.blur.filter(|blur| {
-                !blur.hidden && blur.blur_type == BlurType::LayerBlur && blur.value > 0.
-            }),
-            _ => None,
-        }
+        shape.frame_clip_layer_blur()
    }

    /// Runs `f` with `ignore_nested_blurs` temporarily forced to `true`.
@@ -521,38 +540,59 @@ impl RenderState {

        let paint = skia::Paint::default();

-        self.surfaces
-            .draw_into(SurfaceId::TextDropShadows, SurfaceId::Current, Some(&paint));
+        // Only draw surfaces that have content (dirty flag optimization)
+        if self.surfaces.is_dirty(SurfaceId::TextDropShadows) {
+            self.surfaces
+                .draw_into(SurfaceId::TextDropShadows, SurfaceId::Current, Some(&paint));
+        }

-        self.surfaces
-            .draw_into(SurfaceId::Fills, SurfaceId::Current, Some(&paint));
+        if self.surfaces.is_dirty(SurfaceId::Fills) {
+            self.surfaces
+                .draw_into(SurfaceId::Fills, SurfaceId::Current, Some(&paint));
+        }

        let mut render_overlay_below_strokes = false;
        if let Some(shape) = shape {
            render_overlay_below_strokes = shape.has_fills();
        }

-        if render_overlay_below_strokes {
+        if render_overlay_below_strokes && self.surfaces.is_dirty(SurfaceId::InnerShadows) {
            self.surfaces
                .draw_into(SurfaceId::InnerShadows, SurfaceId::Current, Some(&paint));
        }

-        self.surfaces
-            .draw_into(SurfaceId::Strokes, SurfaceId::Current, Some(&paint));
+        if self.surfaces.is_dirty(SurfaceId::Strokes) {
+            self.surfaces
+                .draw_into(SurfaceId::Strokes, SurfaceId::Current, Some(&paint));
+        }

-        if !render_overlay_below_strokes {
+        if !render_overlay_below_strokes && self.surfaces.is_dirty(SurfaceId::InnerShadows) {
            self.surfaces
                .draw_into(SurfaceId::InnerShadows, SurfaceId::Current, Some(&paint));
        }

-        let surface_ids = SurfaceId::Strokes as u32
-            | SurfaceId::Fills as u32
-            | SurfaceId::InnerShadows as u32
-            | SurfaceId::TextDropShadows as u32;
+        // Build mask of dirty surfaces that need clearing
+        let mut dirty_surfaces_to_clear = 0u32;
+        if self.surfaces.is_dirty(SurfaceId::Strokes) {
+            dirty_surfaces_to_clear |= SurfaceId::Strokes as u32;
+        }
+        if self.surfaces.is_dirty(SurfaceId::Fills) {
+            dirty_surfaces_to_clear |= SurfaceId::Fills as u32;
+        }
+        if self.surfaces.is_dirty(SurfaceId::InnerShadows) {
+            dirty_surfaces_to_clear |= SurfaceId::InnerShadows as u32;
+        }
+        if self.surfaces.is_dirty(SurfaceId::TextDropShadows) {
+            dirty_surfaces_to_clear |= SurfaceId::TextDropShadows as u32;
+        }

-        self.surfaces.apply_mut(surface_ids, |s| {
-            s.canvas().clear(skia::Color::TRANSPARENT);
-        });
+        if dirty_surfaces_to_clear != 0 {
+            self.surfaces.apply_mut(dirty_surfaces_to_clear, |s| {
+                s.canvas().clear(skia::Color::TRANSPARENT);
+            });
+            // Clear dirty flags for surfaces we just cleared
+            self.surfaces.clear_dirty(dirty_surfaces_to_clear);
+        }
    }

    pub fn clear_focus_mode(&mut self) {
@@ -605,9 +645,17 @@ impl RenderState {
            | strokes_surface_id as u32
            | innershadows_surface_id as u32
            | text_drop_shadows_surface_id as u32;
-        self.surfaces.apply_mut(surface_ids, |s| {
-            s.canvas().save();
-        });
+
+        // Only save canvas state if we have clipping or transforms
+        // For simple shapes without clipping, skip expensive save/restore
+        let needs_save =
+            clip_bounds.is_some() || offset.is_some() || !shape.transform.is_identity();
+
+        if needs_save {
+            self.surfaces.apply_mut(surface_ids, |s| {
+                s.canvas().save();
+            });
+        }

        let antialias = shape.should_use_antialias(self.get_scale());

@@ -683,16 +731,18 @@ impl RenderState {
                    matrix.pre_concat(&svg_transform);
                }

-                self.surfaces.canvas(fills_surface_id).concat(&matrix);
+                self.surfaces
+                    .canvas_and_mark_dirty(fills_surface_id)
+                    .concat(&matrix);

                if let Some(svg) = shape.svg.as_ref() {
-                    svg.render(self.surfaces.canvas(fills_surface_id))
+                    svg.render(self.surfaces.canvas_and_mark_dirty(fills_surface_id));
                } else {
                    let font_manager = skia::FontMgr::from(self.fonts().font_provider().clone());
                    let dom_result = skia::svg::Dom::from_str(&sr.content, font_manager);
                    match dom_result {
                        Ok(dom) => {
-                            dom.render(self.surfaces.canvas(fills_surface_id));
+                            dom.render(self.surfaces.canvas_and_mark_dirty(fills_surface_id));
                            shape.to_mut().set_svg(dom);
                        }
                        Err(e) => {
@@ -908,9 +958,13 @@ impl RenderState {
        if apply_to_current_surface {
            self.apply_drawing_to_render_canvas(Some(&shape));
        }
-        self.surfaces.apply_mut(surface_ids, |s| {
-            s.canvas().restore();
-        });
+
+        // Only restore if we saved (optimization for simple shapes)
+        if needs_save {
+            self.surfaces.apply_mut(surface_ids, |s| {
+                s.canvas().restore();
+            });
+        }
    }

    pub fn update_render_context(&mut self, tile: tiles::Tile) {
@@ -1031,6 +1085,7 @@ impl RenderState {
        // reorder by distance to the center.
        self.current_tile = None;
        self.render_in_progress = true;
+
        self.apply_drawing_to_render_canvas(None);

        if sync_render {
@@ -1117,18 +1172,6 @@ impl RenderState {
            self.nested_fills.push(Vec::new());
        }

-        let mut paint = skia::Paint::default();
-        paint.set_blend_mode(element.blend_mode().into());
-        paint.set_alpha_f(element.opacity());
-
-        if let Some(frame_blur) = Self::frame_clip_layer_blur(element) {
-            let scale = self.get_scale();
-            let sigma = frame_blur.value * scale;
-            if let Some(filter) = skia::image_filters::blur((sigma, sigma), None, None, None) {
-                paint.set_image_filter(filter);
-            }
-        }
-
        // When we're rendering the mask shape we need to set a special blend mode
        // called 'destination-in' that keeps the drawn content within the mask.
        // @see https://skia.org/docs/user/api/skblendmode_overview/
@@ -1141,16 +1184,40 @@ impl RenderState {
                .save_layer(&mask_rec);
        }

-        let layer_rec = skia::canvas::SaveLayerRec::default().paint(&paint);
-        self.surfaces
-            .canvas(SurfaceId::Current)
-            .save_layer(&layer_rec);
+        // Only create save_layer if actually needed
+        // For simple shapes with default opacity and blend mode, skip expensive save_layer
+        // Groups with masks need a layer to properly handle the mask rendering
+        let needs_layer = element.needs_layer();
+
+        if needs_layer {
+            let mut paint = skia::Paint::default();
+            paint.set_blend_mode(element.blend_mode().into());
+            paint.set_alpha_f(element.opacity());
+
+            if let Some(frame_blur) = Self::frame_clip_layer_blur(element) {
+                let scale = self.get_scale();
+                let sigma = frame_blur.value * scale;
+                if let Some(filter) = skia::image_filters::blur((sigma, sigma), None, None, None) {
+                    paint.set_image_filter(filter);
+                }
+            }
+
+            let layer_rec = skia::canvas::SaveLayerRec::default().paint(&paint);
+            self.surfaces
+                .canvas(SurfaceId::Current)
+                .save_layer(&layer_rec);
+        }

        self.focus_mode.enter(&element.id);
    }

    #[inline]
-    pub fn render_shape_exit(&mut self, element: &Shape, visited_mask: bool) {
+    pub fn render_shape_exit(
+        &mut self,
+        element: &Shape,
+        visited_mask: bool,
+        clip_bounds: Option<ClipStack>,
+    ) {
        if visited_mask {
            // Because masked groups needs two rendering passes (first drawing
            // the content and then drawing the mask), we need to do an
@@ -1206,7 +1273,7 @@ impl RenderState {
            element_strokes.to_mut().clip_content = false;
            self.render_shape(
                &element_strokes,
-                None,
+                clip_bounds,
                SurfaceId::Fills,
                SurfaceId::Strokes,
                SurfaceId::InnerShadows,
@@ -1217,7 +1284,14 @@ impl RenderState {
            );
        }

-        self.surfaces.canvas(SurfaceId::Current).restore();
+        // Only restore if we created a layer (optimization for simple shapes)
+        // Groups with masks need restore to properly handle the mask rendering
+        let needs_layer = element.needs_layer();
+
+        if needs_layer {
+            self.surfaces.canvas(SurfaceId::Current).restore();
+        }
+
        self.focus_mode.exit(&element.id);
    }

@@ -1457,18 +1531,48 @@ impl RenderState {
            }

            if visited_children {
-                self.render_shape_exit(element, visited_mask);
+                // Skip render_shape_exit for flattened containers
+                if !element.can_flatten() {
+                    self.render_shape_exit(element, visited_mask, clip_bounds);
+                }
                continue;
            }

            if !node_render_state.is_root() {
                let transformed_element: Cow<Shape> = Cow::Borrowed(element);
-                let scale = self.get_scale();
-                let extrect = transformed_element.extrect(tree, scale);

-                let is_visible = extrect.intersects(self.render_area)
-                    && !transformed_element.hidden
-                    && !transformed_element.visually_insignificant(scale, tree);
+                // Aggressive early exit: check hidden first (fastest check)
+                if transformed_element.hidden {
+                    continue;
+                }
+
+                // For frames and groups, we must use extrect because they can have nested content
+                // that extends beyond their selrect. Using selrect for early exit would incorrectly
+                // skip frames/groups that have nested content in the current tile.
+                let is_container = matches!(
+                    transformed_element.shape_type,
+                    crate::shapes::Type::Frame(_) | crate::shapes::Type::Group(_)
+                );
+
+                let scale = self.get_scale();
+                let has_effects = transformed_element.has_effects_that_extend_bounds();
+
+                let is_visible = if is_container {
+                    // Containers (frames/groups) must always use extrect to include nested content
+                    let extrect = transformed_element.extrect(tree, scale);
+                    extrect.intersects(self.render_area)
+                        && !transformed_element.visually_insignificant(scale, tree)
+                } else if !has_effects {
+                    // Simple shape: selrect check is sufficient, skip expensive extrect
+                    let selrect = transformed_element.selrect();
+                    selrect.intersects(self.render_area)
+                        && !transformed_element.visually_insignificant(scale, tree)
+                } else {
+                    // Shape with effects: need extrect for accurate bounds
+                    let extrect = transformed_element.extrect(tree, scale);
+                    extrect.intersects(self.render_area)
+                        && !transformed_element.visually_insignificant(scale, tree)
+                };

                if self.options.is_debug_visible() {
                    let shape_extrect_bounds =
@@ -1481,7 +1585,12 @@ impl RenderState {
                }
            }

-            self.render_shape_enter(element, mask);
+            // Skip render_shape_enter/exit for flattened containers
+            // If a container was flattened, it doesn't affect children visually, so we skip
+            // the expensive enter/exit operations and process children directly
+            if !element.can_flatten() {
+                self.render_shape_enter(element, mask);
+            }

            if !node_render_state.is_root() && self.focus_mode.is_active() {
                let scale: f32 = self.get_scale();
@@ -1515,6 +1624,8 @@ impl RenderState {
                        _ => None,
                    };

+                    let element_extrect = element.extrect(tree, scale);
+
                    for shadow in element.drop_shadows_visible() {
                        let paint = skia::Paint::default();
                        let layer_rec = skia::canvas::SaveLayerRec::default().paint(&paint);
@@ -1526,7 +1637,7 @@ impl RenderState {
                        // First pass: Render shadow in black to establish alpha mask
                        self.render_drop_black_shadow(
                            element,
-                            &element.extrect(tree, scale),
+                            &element_extrect,
                            shadow,
                            clip_bounds.clone(),
                            scale,
@@ -1546,9 +1657,10 @@ impl RenderState {
                                    .get_nested_shadow_clip_bounds(element, shadow);

                                if !matches!(shadow_shape.shape_type, Type::Text(_)) {
+                                    let shadow_extrect = shadow_shape.extrect(tree, scale);
                                    self.render_drop_black_shadow(
                                        shadow_shape,
-                                        &shadow_shape.extrect(tree, scale),
+                                        &shadow_extrect,
                                        shadow,
                                        clip_bounds,
                                        scale,
@@ -1682,14 +1794,18 @@ impl RenderState {
                self.apply_drawing_to_render_canvas(Some(element));
            }

-            match element.shape_type {
-                Type::Frame(_) if Self::frame_clip_layer_blur(element).is_some() => {
-                    self.nested_blurs.push(None);
+            // Skip nested state updates for flattened containers
+            // Flattened containers don't affect children, so we don't need to track their state
+            if !element.can_flatten() {
+                match element.shape_type {
+                    Type::Frame(_) if Self::frame_clip_layer_blur(element).is_some() => {
+                        self.nested_blurs.push(None);
+                    }
+                    Type::Frame(_) | Type::Group(_) => {
+                        self.nested_blurs.push(element.blur);
+                    }
+                    _ => {}
                }
-                Type::Frame(_) | Type::Group(_) => {
-                    self.nested_blurs.push(element.blur);
-                }
-                _ => {}
            }

            // Set the node as visited_children before processing children
@@ -1704,24 +1820,35 @@ impl RenderState {
            if element.is_recursive() {
                let children_clip_bounds =
                    node_render_state.get_children_clip_bounds(element, None);
-                let mut children_ids: Vec<_> = element.children_ids_iter(false).collect();
+
+                let children_ids: Vec<_> = if element.can_flatten() {
+                    // Container was flattened: get simplified children (which skip this level)
+                    get_simplified_children(tree, element)
+                } else {
+                    // Container not flattened: use original children
+                    element.children_ids_iter(false).copied().collect()
+                };

                // Z-index ordering on Layouts
-                if element.has_layout() {
+                let children_ids = if element.has_layout() {
+                    let mut ids = children_ids;
                    if element.is_flex() && !element.is_flex_reverse() {
-                        children_ids.reverse();
+                        ids.reverse();
                    }

-                    children_ids.sort_by(|id1, id2| {
+                    ids.sort_by(|id1, id2| {
                        let z1 = tree.get(id1).map(|s| s.z_index()).unwrap_or(0);
                        let z2 = tree.get(id2).map(|s| s.z_index()).unwrap_or(0);
                        z2.cmp(&z1)
                    });
-                }
+                    ids
+                } else {
+                    children_ids
+                };

                for child_id in children_ids.iter() {
                    self.pending_nodes.push(NodeRenderState {
-                        id: **child_id,
+                        id: *child_id,
                        visited_children: false,
                        clip_bounds: children_clip_bounds.clone(),
                        visited_mask: false,
@@ -1803,14 +1930,39 @@ impl RenderState {
                .canvas(SurfaceId::Current)
                .clear(self.background_color);

-            let root_ids = {
-                if let Some(shape_id) = base_object {
+            // Get or compute root_ids and root_ids_map (cached to avoid recalculation every frame)
+            let root_ids_map = {
+                let root_ids = if let Some(shape_id) = base_object {
                    vec![*shape_id]
                } else {
                    let Some(root) = tree.get(&Uuid::nil()) else {
                        return Err(String::from("Root shape not found"));
                    };
                    root.children_ids(false)
+                };
+
+                // Check if cache is valid (same root_ids)
+                let cache_valid = self
+                    .cached_root_ids
+                    .as_ref()
+                    .map(|cached| cached.as_slice() == root_ids.as_slice())
+                    .unwrap_or(false);
+
+                if cache_valid {
+                    // Use cached map
+                    self.cached_root_ids_map.as_ref().unwrap().clone()
+                } else {
+                    // Recompute and cache
+                    let root_ids_map: std::collections::HashMap<Uuid, usize> = root_ids
+                        .iter()
+                        .enumerate()
+                        .map(|(i, id)| (*id, i))
+                        .collect();
+
+                    self.cached_root_ids = Some(root_ids.clone());
+                    self.cached_root_ids_map = Some(root_ids_map.clone());
+
+                    root_ids_map
                }
            };

@@ -1821,12 +1973,6 @@ impl RenderState {

                if !self.surfaces.has_cached_tile_surface(next_tile) {
                    if let Some(ids) = self.tiles.get_shapes_at(next_tile) {
-                        let root_ids_map: std::collections::HashMap<Uuid, usize> = root_ids
-                            .iter()
-                            .enumerate()
-                            .map(|(i, id)| (*id, i))
-                            .collect();
-
                        // We only need first level shapes
                        let mut valid_ids: Vec<Uuid> = ids
                            .iter()
--- a/render-wasm/src/render/fills.rs
+++ b/render-wasm/src/render/fills.rs
@@ -18,7 +18,7 @@ fn draw_image_fill(
    }

    let size = image.unwrap().dimensions();
-    let canvas = render_state.surfaces.canvas(surface_id);
+    let canvas = render_state.surfaces.canvas_and_mark_dirty(surface_id);
    let container = &shape.selrect;
    let path_transform = shape.to_path_transform();

--- a/render-wasm/src/render/filters.rs
+++ b/render-wasm/src/render/filters.rs
@@ -41,7 +41,7 @@ where
    F: FnOnce(&mut RenderState, SurfaceId),
 {
    if let Some((image, scale)) = render_into_filter_surface(render_state, bounds, draw_fn) {
-        let canvas = render_state.surfaces.canvas(target_surface);
+        let canvas = render_state.surfaces.canvas_and_mark_dirty(target_surface);

        // If we scaled down, we need to scale the source rect and adjust the destination
        if scale < 1.0 {
--- a/render-wasm/src/render/shadows.rs
+++ b/render-wasm/src/render/shadows.rs
@@ -135,7 +135,7 @@ pub fn render_text_shadows(

    let canvas = render_state
        .surfaces
-        .canvas(surface_id.unwrap_or(SurfaceId::TextDropShadows));
+        .canvas_and_mark_dirty(surface_id.unwrap_or(SurfaceId::TextDropShadows));

    for shadow in shadows {
        let shadow_layer = SaveLayerRec::default().paint(shadow);
--- a/render-wasm/src/render/strokes.rs
+++ b/render-wasm/src/render/strokes.rs
@@ -387,7 +387,7 @@ fn draw_image_stroke_in_container(
    }

    let size = image.unwrap().dimensions();
-    let canvas = render_state.surfaces.canvas(surface_id);
+    let canvas = render_state.surfaces.canvas_and_mark_dirty(surface_id);
    let container = &shape.selrect;
    let path_transform = shape.to_path_transform();
    let svg_attrs = shape.svg_attrs.as_ref();
@@ -606,7 +606,7 @@ fn render_internal(

    let scale = render_state.get_scale();
    let target_surface = surface_id.unwrap_or(SurfaceId::Strokes);
-    let canvas = render_state.surfaces.canvas(target_surface);
+    let canvas = render_state.surfaces.canvas_and_mark_dirty(target_surface);
    let selrect = shape.selrect;
    let path_transform = shape.to_path_transform();
    let svg_attrs = shape.svg_attrs.as_ref();
@@ -688,7 +688,7 @@ pub fn render_text_paths(
    let scale = render_state.get_scale();
    let canvas = render_state
        .surfaces
-        .canvas(surface_id.unwrap_or(SurfaceId::Strokes));
+        .canvas_and_mark_dirty(surface_id.unwrap_or(SurfaceId::Strokes));
    let selrect = &shape.selrect;
    let svg_attrs = shape.svg_attrs.as_ref();
    let mut paint: skia_safe::Handle<_> =
--- a/render-wasm/src/render/surfaces.rs
+++ b/render-wasm/src/render/surfaces.rs
@@ -55,6 +55,8 @@ pub struct Surfaces {
    tiles: TileTextureCache,
    sampling_options: skia::SamplingOptions,
    margins: skia::ISize,
+    // Tracks which surfaces have content (dirty flag bitmask)
+    dirty_surfaces: u32,
 }

 #[allow(dead_code)]
@@ -105,6 +107,7 @@ impl Surfaces {
            tiles,
            sampling_options,
            margins,
+            dirty_surfaces: 0,
        }
    }

@@ -147,10 +150,51 @@ impl Surfaces {
        None
    }

+    /// Returns a mutable reference to the canvas and automatically marks
+    /// render surfaces as dirty when accessed. This tracks which surfaces
+    /// have content for optimization purposes.
+    pub fn canvas_and_mark_dirty(&mut self, id: SurfaceId) -> &skia::Canvas {
+        // Automatically mark render surfaces as dirty when accessed
+        // This tracks which surfaces have content for optimization
+        match id {
+            SurfaceId::Fills
+            | SurfaceId::Strokes
+            | SurfaceId::InnerShadows
+            | SurfaceId::TextDropShadows => {
+                self.mark_dirty(id);
+            }
+            _ => {}
+        }
+        self.canvas(id)
+    }
+
+    /// Returns a mutable reference to the canvas without any side effects.
+    /// Use this when you only need to read or manipulate the canvas state
+    /// without marking the surface as dirty.
    pub fn canvas(&mut self, id: SurfaceId) -> &skia::Canvas {
        self.get_mut(id).canvas()
    }

+    /// Marks a surface as having content (dirty)
+    pub fn mark_dirty(&mut self, id: SurfaceId) {
+        self.dirty_surfaces |= id as u32;
+    }
+
+    /// Checks if a surface has content
+    pub fn is_dirty(&self, id: SurfaceId) -> bool {
+        (self.dirty_surfaces & id as u32) != 0
+    }
+
+    /// Clears the dirty flag for a surface or set of surfaces
+    pub fn clear_dirty(&mut self, ids: u32) {
+        self.dirty_surfaces &= !ids;
+    }
+
+    /// Clears all dirty flags
+    pub fn clear_all_dirty(&mut self) {
+        self.dirty_surfaces = 0;
+    }
+
    pub fn flush_and_submit(&mut self, gpu_state: &mut GpuState, id: SurfaceId) {
        let surface = self.get_mut(id);
        gpu_state.context.flush_and_submit_surface(surface, None);
@@ -159,9 +203,12 @@ impl Surfaces {
    pub fn draw_into(&mut self, from: SurfaceId, to: SurfaceId, paint: Option<&skia::Paint>) {
        let sampling_options = self.sampling_options;

-        self.get_mut(from)
-            .clone()
-            .draw(self.canvas(to), (0.0, 0.0), sampling_options, paint);
+        self.get_mut(from).clone().draw(
+            self.canvas_and_mark_dirty(to),
+            (0.0, 0.0),
+            sampling_options,
+            paint,
+        );
    }

    pub fn apply_mut(&mut self, ids: u32, mut f: impl FnMut(&mut skia::Surface)) {
@@ -212,18 +259,33 @@ impl Surfaces {

    pub fn update_render_context(&mut self, render_area: skia::Rect, scale: f32) {
        let translation = self.get_render_context_translation(render_area, scale);
-        self.apply_mut(
-            SurfaceId::Fills as u32
-                | SurfaceId::Strokes as u32
-                | SurfaceId::InnerShadows as u32
-                | SurfaceId::TextDropShadows as u32,
-            |s| {
-                let canvas = s.canvas();
-                canvas.reset_matrix();
-                canvas.scale((scale, scale));
-                canvas.translate(translation);
-            },
-        );
+
+        // When context changes (zoom/pan/tile), clear all render surfaces first
+        // to remove any residual content from previous tiles, then mark as dirty
+        // so they get redrawn with new transformations
+        let surface_ids = SurfaceId::Fills as u32
+            | SurfaceId::Strokes as u32
+            | SurfaceId::InnerShadows as u32
+            | SurfaceId::TextDropShadows as u32;
+
+        // Clear surfaces before updating transformations to remove residual content
+        self.apply_mut(surface_ids, |s| {
+            s.canvas().clear(skia::Color::TRANSPARENT);
+        });
+
+        // Mark all render surfaces as dirty so they get redrawn
+        self.mark_dirty(SurfaceId::Fills);
+        self.mark_dirty(SurfaceId::Strokes);
+        self.mark_dirty(SurfaceId::InnerShadows);
+        self.mark_dirty(SurfaceId::TextDropShadows);
+
+        // Update transformations
+        self.apply_mut(surface_ids, |s| {
+            let canvas = s.canvas();
+            canvas.reset_matrix();
+            canvas.scale((scale, scale));
+            canvas.translate(translation);
+        });
    }

    #[inline]
@@ -264,19 +326,21 @@ impl Surfaces {
    pub fn draw_rect_to(&mut self, id: SurfaceId, shape: &Shape, paint: &Paint) {
        if let Some(corners) = shape.shape_type.corners() {
            let rrect = RRect::new_rect_radii(shape.selrect, &corners);
-            self.canvas(id).draw_rrect(rrect, paint);
+            self.canvas_and_mark_dirty(id).draw_rrect(rrect, paint);
        } else {
-            self.canvas(id).draw_rect(shape.selrect, paint);
+            self.canvas_and_mark_dirty(id)
+                .draw_rect(shape.selrect, paint);
        }
    }

    pub fn draw_circle_to(&mut self, id: SurfaceId, shape: &Shape, paint: &Paint) {
-        self.canvas(id).draw_oval(shape.selrect, paint);
+        self.canvas_and_mark_dirty(id)
+            .draw_oval(shape.selrect, paint);
    }

    pub fn draw_path_to(&mut self, id: SurfaceId, shape: &Shape, paint: &Paint) {
        if let Some(path) = shape.get_skia_path() {
-            self.canvas(id).draw_path(&path, paint);
+            self.canvas_and_mark_dirty(id).draw_path(&path, paint);
        }
    }

@@ -304,6 +368,9 @@ impl Surfaces {
        self.canvas(SurfaceId::UI)
            .clear(skia::Color::TRANSPARENT)
            .reset_matrix();
+
+        // Clear all dirty flags after reset
+        self.clear_all_dirty();
    }

    pub fn cache_current_tile_texture(
--- a/render-wasm/src/render/text.rs
+++ b/render-wasm/src/render/text.rs
@@ -192,7 +192,7 @@ pub fn render(
            }
        }

-        let canvas = render_state.surfaces.canvas(target_surface);
+        let canvas = render_state.surfaces.canvas_and_mark_dirty(target_surface);
        render_text_on_canvas(canvas, shape, paragraph_builders, shadow, blur);
        return;
    }
@@ -371,7 +371,7 @@ pub fn render_as_path(
 ) {
    let canvas = render_state
        .surfaces
-        .canvas(surface_id.unwrap_or(SurfaceId::Fills));
+        .canvas_and_mark_dirty(surface_id.unwrap_or(SurfaceId::Fills));

    for (path, paint) in paths {
        // Note: path can be empty
@@ -397,7 +397,7 @@ pub fn render_position_data(
        let rect = Rect::from_xywh(pd.x, pd.y, pd.width, pd.height);
        render_state
            .surfaces
-            .canvas(surface_id)
+            .canvas_and_mark_dirty(surface_id)
            .draw_rect(rect, &paint);
    }
 }
--- a/render-wasm/src/shapes.rs
+++ b/render-wasm/src/shapes.rs
@@ -920,8 +920,13 @@ impl Shape {
            }

            Type::Group(_) | Type::Frame(_) if !self.clip_content => {
+                // For frames and groups, we must always calculate extrect for all children
+                // to ensure accurate bounds that include nested content across all tiles.
+                // Using selrect for children can cause frames to be incorrectly omitted from
+                // tiles where they have nested content.
                for child_id in self.children_ids_iter(false) {
                    if let Some(child_shape) = shapes_pool.get(child_id) {
+                        // Always calculate full extrect for children to ensure accurate bounds
                        let child_extrect = child_shape.calculate_extrect(shapes_pool, scale);
                        rect.join(child_extrect);
                    }
@@ -1419,6 +1424,97 @@ impl Shape {
        !self.fills.is_empty()
    }

+    /// Determines if this frame or group can be flattened (doesn't affect children visually)
+    /// A container can be flattened if it has no visual effects that affect its children
+    /// and doesn't render its own content (no fills/strokes)
+    pub fn can_flatten(&self) -> bool {
+        // Only frames and groups can be flattened
+        if !matches!(self.shape_type, Type::Frame(_) | Type::Group(_)) {
+            return false;
+        }
+
+        // Cannot flatten if it has visual effects that affect children:
+
+        if self.clip_content {
+            return false;
+        }
+
+        if !self.transform.is_identity() {
+            return false;
+        }
+
+        if self.opacity != 1.0 {
+            return false;
+        }
+
+        if self.blend_mode() != BlendMode::default() {
+            return false;
+        }
+
+        if self.blur.is_some() {
+            return false;
+        }
+
+        if !self.shadows.is_empty() {
+            return false;
+        }
+
+        if let Type::Group(group) = &self.shape_type {
+            if group.masked {
+                return false;
+            }
+        }
+
+        if self.hidden {
+            return false;
+        }
+
+        // If the container itself has fills/strokes, it renders something visible
+        // We cannot flatten containers that render their own background/border
+        // because they need to be rendered even if they don't affect children
+        if self.has_fills() || self.has_visible_strokes() {
+            return false;
+        }
+
+        true
+    }
+
+    /// Checks if this shape needs a layer for rendering due to visual effects
+    /// (opacity < 1.0, non-default blend mode, or frame clip layer blur)
+    pub fn needs_layer(&self) -> bool {
+        self.opacity() < 1.0
+            || self.blend_mode().0 != skia::BlendMode::SrcOver
+            || self.has_frame_clip_layer_blur()
+            || (matches!(self.shape_type, Type::Group(g) if g.masked))
+    }
+
+    /// Checks if this frame has clip layer blur (affects children)
+    /// A frame has clip layer blur if it clips content and has layer blur
+    pub fn has_frame_clip_layer_blur(&self) -> bool {
+        self.frame_clip_layer_blur().is_some()
+    }
+
+    /// Returns the frame clip layer blur if this frame has one
+    /// A frame has clip layer blur if it clips content and has layer blur
+    pub fn frame_clip_layer_blur(&self) -> Option<Blur> {
+        use crate::shapes::BlurType;
+        match self.shape_type {
+            Type::Frame(_) if self.clip_content => self.blur.filter(|blur| {
+                !blur.hidden && blur.blur_type == BlurType::LayerBlur && blur.value > 0.0
+            }),
+            _ => None,
+        }
+    }
+
+    /// Checks if this shape has visual effects that might extend its bounds beyond selrect
+    /// Shapes with these effects require expensive extrect calculation for accurate visibility checks
+    pub fn has_effects_that_extend_bounds(&self) -> bool {
+        !self.shadows.is_empty()
+            || self.blur.is_some()
+            || !self.strokes.is_empty()
+            || matches!(self.shape_type, Type::Group(_) | Type::Frame(_))
+    }
+
    pub fn count_visible_inner_strokes(&self) -> usize {
        self.visible_strokes()
            .filter(|s| s.kind == StrokeKind::Inner)
Author	SHA1	Message	Date
Elena Torro	c7c702ecfa	🔧 Schedule requestAnimationFrame on render finish	2026-01-14 12:05:51 +01:00
Elena Torro	a3119bef5e	🔧 Show message and button to reload the page when WebGL context is lost	2026-01-14 11:10:03 +01:00
Alejandro Alonso	c60d74df62	🐛 Fix nested frames border clipping	2026-01-14 11:10:03 +01:00
Alejandro Alonso	d593e299e3	🐛 Fix mask erros on save/restore optimizations	2026-01-14 11:10:03 +01:00
Alejandro Alonso	4a8e02987f	🐛 Fix mask erros on save/restore optimizations	2026-01-14 11:10:03 +01:00
Alejandro Alonso	ee766e85a0	🎉 Wasm render dirty surfaces	2026-01-14 11:10:03 +01:00
Alejandro Alonso	35e3b7f19a	🎉 Root ids refactor	2026-01-14 11:10:03 +01:00
Alejandro Alonso	1810df232b	🎉 Ignore frames and groups when they have no visual extra information	2026-01-14 11:10:03 +01:00
Alejandro Alonso	3e99ad036c	🎉 Avoid unnecesary saves and restores	2026-01-14 11:10:03 +01:00
Alejandro Alonso	042a3a4080	🐛 Fix wasm playgrounds	2026-01-14 11:10:03 +01:00
Belén Albeza	f0687fd1f7	🎉 Make workspace loader to wait for first render	2026-01-14 11:10:03 +01:00
Aitor Moreno	2c9159288f	🐛 Fix previous styles lost when changing selected text	2026-01-14 11:10:01 +01:00
Alejandro Alonso	51635770ce	Merge pull request #8065 from penpot/eva-fix-lost-translation 🐛 Fix translation on rename token	2026-01-14 09:44:41 +01:00
Eva Marco	18a4e63da0	🐛 Fix translation on rename token	2026-01-13 15:57:09 +01:00