From c6b8efe4e8b4885ecaad7403b41bcbc33675e3a4 Mon Sep 17 00:00:00 2001
From: Vitaly Turovsky <vital2580@icloud.com>
Date: Wed, 5 Mar 2025 22:22:35 +0300
Subject: [PATCH] hotfix: should fix edge case when canvas was out of viewport
 bounds on ios

---
 src/react/DebugEdges.tsx | 10 +++++++++-
 src/styles.css           | 14 ++++++++------
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/react/DebugEdges.tsx b/src/react/DebugEdges.tsx
index a65b9f92..150e1f16 100644
--- a/src/react/DebugEdges.tsx
+++ b/src/react/DebugEdges.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { useIsHashActive } from './simpleHooks'
 
 export default () => {
-  const MODES_COUNT = 4
+  const MODES_COUNT = 5
   const [mode, setMode] = useState(0)
   const isHashActive = useIsHashActive('#edges')
 
@@ -41,6 +41,14 @@ export default () => {
     styles.height = '100dvh'
     text = 'top 0 fixed 100dvh'
   }
+  if (mode === 4) {
+    styles.position = 'fixed'
+    styles.top = 0
+    styles.left = 0
+    styles.right = 0
+    styles.height = '100dvh'
+    text = 'top 0 bottom 0 fixed 100dvh'
+  }
 
   return <div
     style={styles}
diff --git a/src/styles.css b/src/styles.css
index 9e97ee31..786b1237 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -132,8 +132,8 @@ body {
   left: 0;
   transform-origin: top left;
   transform: scale(var(--guiScale));
-  width: calc(100% / var(--guiScale));
-  height: calc(100% / var(--guiScale));
+  width: calc(100dvw / var(--guiScale));
+  height: calc(100dvh / var(--guiScale));
   z-index: 8;
   image-rendering: optimizeSpeed;
   image-rendering: -moz-crisp-edges;
@@ -148,8 +148,8 @@ body {
   inset: 0;
   transform-origin: top left;
   transform: scale(var(--guiScale));
-  width: calc(100% / var(--guiScale));
-  height: calc(100% / var(--guiScale));
+  width: calc(100dvw / var(--guiScale));
+  height: calc(100dvh / var(--guiScale));
   z-index: 80;
   image-rendering: pixelated;
   pointer-events: none;
@@ -163,8 +163,10 @@ body {
   position: fixed;
   top: 0;
   left: 0;
-  height: 100%;
-  width: 100%;
+  bottom: 0;
+  right: 0;
+  height: 100dvh;
+  width: 100dvw;
   font-size: 0;
   margin: 0;
   padding: 0;