diff --git a/src/plugins/ui/renderer.ts b/src/plugins/ui/renderer.ts
index 8e420a1f8..670eb3ad7 100644
--- a/src/plugins/ui/renderer.ts
+++ b/src/plugins/ui/renderer.ts
@@ -116,13 +116,19 @@ export class RendererPlugin extends UIPlugin {
     switch (layer) {
       case LAYERS.Background:
         this.drawBackground(renderingContext);
-        for (const zone of this.getters.getAllActiveViewportsZones().reverse()) {
-          this.drawBackgroundGrid(renderingContext, zone);
+        for (const zone of this.getters.getAllActiveViewportsZones()) {
+          const { ctx } = renderingContext;
+          ctx.save();
+          ctx.beginPath();
+          const rect = this.getters.getVisibleRect(zone);
+          ctx.rect(rect.x, rect.y, rect.width, rect.height);
+          ctx.clip();
           this.boxes = this.getGridBoxes(zone);
           this.drawCellBackground(renderingContext);
           this.drawBorders(renderingContext);
           this.drawTexts(renderingContext);
           this.drawIcon(renderingContext);
+          ctx.restore();
         }
         this.drawFrozenPanes(renderingContext);
         break;
@@ -136,35 +142,20 @@ export class RendererPlugin extends UIPlugin {
   }
 
   private drawBackground(renderingContext: GridRenderingContext) {
-    const { ctx } = renderingContext;
-
-    const { width, height } = this.getters.getSheetViewDimensionWithHeaders();
-    // white background
-    ctx.fillStyle = "#ffffff";
-    ctx.fillRect(0, 0, width + CANVAS_SHIFT, height + CANVAS_SHIFT);
-  }
-
-  private drawBackgroundGrid(renderingContext: GridRenderingContext, zone: Zone) {
     const { ctx, thinLineWidth } = renderingContext;
-
-    // const { width, height } = this.getters.getSheetViewDimensionWithHeaders();
+    const { width, height } = this.getters.getSheetViewDimensionWithHeaders();
     const sheetId = this.getters.getActiveSheetId();
-    const { x, y, width, height } = this.getters.getVisibleRect(zone);
 
     // white background
     ctx.fillStyle = "#ffffff";
-    ctx.fillRect(x, y, width, height);
+    ctx.fillRect(0, 0, width + CANVAS_SHIFT, height + CANVAS_SHIFT);
 
     // background grid
-    const visibleCols = this.getters
-      .getSheetViewVisibleCols()
-      .filter((col) => col >= zone.left && col <= zone.right);
+    const visibleCols = this.getters.getSheetViewVisibleCols();
     const left = visibleCols[0];
     const right = visibleCols[visibleCols.length - 1];
 
-    const visibleRows = this.getters
-      .getSheetViewVisibleRows()
-      .filter((row) => row >= zone.top && row <= zone.bottom);
+    const visibleRows = this.getters.getSheetViewVisibleRows();
     const top = visibleRows[0];
     const bottom = visibleRows[visibleRows.length - 1];
 
@@ -178,21 +169,21 @@ export class RendererPlugin extends UIPlugin {
     // vertical lines
     for (const i of visibleCols) {
       const zone = { top, bottom, left: i, right: i };
-      const { x, y, width: colWidth, height: colHeight } = this.getters.getVisibleRect(zone);
-      ctx.moveTo(x + colWidth, y);
+      const { x, width: colWidth, height: colHeight } = this.getters.getVisibleRect(zone);
+      ctx.moveTo(x + colWidth, 0);
       ctx.lineTo(
         x + colWidth,
-        y + Math.min(height, colHeight + (this.getters.isDashboard() ? 0 : HEADER_HEIGHT))
+        Math.min(height, colHeight + (this.getters.isDashboard() ? 0 : HEADER_HEIGHT))
       );
     }
 
     // horizontal lines
     for (const i of visibleRows) {
       const zone = { left, right, top: i, bottom: i };
-      const { x, y, width: rowWidth, height: rowHeight } = this.getters.getVisibleRect(zone);
-      ctx.moveTo(x, y + rowHeight);
+      const { y, width: rowWidth, height: rowHeight } = this.getters.getVisibleRect(zone);
+      ctx.moveTo(0, y + rowHeight);
       ctx.lineTo(
-        x + Math.min(width, rowWidth + (this.getters.isDashboard() ? 0 : HEADER_WIDTH)),
+        Math.min(width, rowWidth + (this.getters.isDashboard() ? 0 : HEADER_WIDTH)),
         y + rowHeight
       );
     }
diff --git a/tests/plugins/__snapshots__/renderer.test.ts.snap b/tests/plugins/__snapshots__/renderer.test.ts.snap
index eaa70020a..95a96504e 100644
--- a/tests/plugins/__snapshots__/renderer.test.ts.snap
+++ b/tests/plugins/__snapshots__/renderer.test.ts.snap
@@ -5,8 +5,6 @@ Array [
   "context.save()",
   "context.fillStyle=\\"#ffffff\\";",
   "context.fillRect(0, 0, 952.5, 974.5)",
-  "context.fillStyle=\\"#ffffff\\";",
-  "context.fillRect(0, 0, 952, 974)",
   "context.lineWidth=0.8;",
   "context.strokeStyle=\\"#E2E3E3\\";",
   "context.beginPath()",
@@ -117,6 +115,10 @@ Array [
   "context.moveTo(0, 989)",
   "context.lineTo(952, 989)",
   "context.stroke()",
+  "context.save()",
+  "context.beginPath()",
+  "context.rect(0, 0, 952, 974)",
+  "context.clip()",
   "context.lineWidth=0.12;",
   "context.strokeStyle=\\"#111\\";",
   "context.textBaseline=\\"top\\";",
@@ -124,6 +126,7 @@ Array [
   "context.fillStyle=\\"#000\\";",
   "context.textAlign=\\"right\\";",
   "context.fillText(\\"1\\", 92, 6)",
+  "context.restore()",
   "context.lineWidth=2.4000000000000004;",
   "context.strokeStyle=\\"#DADFE8\\";",
   "context.beginPath()",