hotfix: should fix edge case when canvas was out of viewport bounds on ios

This commit is contained in:
Vitaly Turovsky 2025-03-05 22:22:35 +03:00
commit c6b8efe4e8
2 changed files with 17 additions and 7 deletions

View file

@ -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}

View file

@ -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;