improve fullscreen editor on iOS Safari

Hunter
Friday, December 19th, 2025 at 3:43 PM


index.html+20-3
index.html
207  
208  			body.mobile-keyboard-open .editor-pane {
209  				position: fixed;
    -				top: 0;
210 +				top: calc(var(--visual-viewport-offset-top, 0px));
211  				left: 0;
212  				width: 100%;
    -				height: 100%;
213 +				height: var(--visual-viewport-height, 100%);
214 +				max-height: var(--visual-viewport-height, 100%);
215  				order: 1;
216  				overscroll-behavior: none;
217 +				overflow: hidden;
218 +			}
219 +
220 +			body.mobile-keyboard-open .editor-pane #editor,
221 +			body.mobile-keyboard-open .editor-pane .cm-editor {
222 +				height: 100% !important;
223 +				max-height: 100% !important;
224  			}
225  		}
226  

633  		let initialViewportHeight = window.visualViewport ? window.visualViewport.height : window.innerHeight;
634  		let isEditorFocused = false;
635  
636 +		function updateViewportVariables() {
637 +			const vv = window.visualViewport;
638 +			if (vv) {
639 +				document.documentElement.style.setProperty('--visual-viewport-height', `${vv.height}px`);
640 +				document.documentElement.style.setProperty('--visual-viewport-offset-top', `${vv.offsetTop}px`);
641 +			}
642 +		}
643 +
644  		function handleViewportChange() {
645  			if (!isMobileDevice()) return;
646  

648  			const heightDifference = initialViewportHeight - currentHeight;
649  			const isKeyboardOpen = heightDifference > 150;
650  
    -			const wasFullscreen = document.body.classList.contains('mobile-keyboard-open');
651 +			updateViewportVariables();
652  
653  			if (isKeyboardOpen && isEditorFocused) {
654  				document.body.classList.add('mobile-keyboard-open');

659  
660  		if (window.visualViewport) {
661  			window.visualViewport.addEventListener('resize', handleViewportChange);
662 +			window.visualViewport.addEventListener('scroll', updateViewportVariables);
663  		} else {
664  			window.addEventListener('resize', handleViewportChange);
665  		}