hotfix: should fix edge case when canvas was out of viewport bounds on ios
This commit is contained in:
parent
a846eb4500
commit
c6b8efe4e8
2 changed files with 17 additions and 7 deletions
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue