Merge pull request #5137 from Minion3665/private/minion/push-rmmvnkvqyynr

fix(android): match iframe size to visual viewport

Author: juliusknorr

css/files.scss

@@ -23,7 +23,7 @@
 	opacity: 1;
 }
 
-#richdocumentsframe {
+.office-viewer__iframe {
 	background-color: #fff;
 	width:100%;
 	height: 100vh;

css/mobile.css

@@ -15,7 +15,7 @@
 		padding-top: 0;
 	}
 
-	#richdocumentsframe {
+	.office-viewer__iframe {
 		height: 100%;
 		position: fixed;
 	}

src/document.js

@@ -9,7 +9,7 @@ import { getRequestToken } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
 import Config from './services/config.tsx'
 import { getUIDefaults, generateCSSVarTokens, getCollaboraTheme } from './helpers/coolParameters.js'
-import { enableScrollLock } from './helpers/safariFixer.js'
+import { enableScrollLock } from './helpers/mobileFixer.js'
 import PostMessageService from './services/postMessage.tsx'
 import { getCapabilities } from './services/capabilities.ts'
 import {

src/helpers/safariFixer.js renamed to src/helpers/mobileFixer.js

@@ -6,27 +6,19 @@
 let scrollLock = false
 let intervalHandler
 
-const isiOS = [
-	'iPad Simulator',
-	'iPhone Simulator',
-	'iPod Simulator',
-	'iPad',
-	'iPhone',
-	'iPod',
-].includes(navigator.platform) || (navigator.userAgent.includes('Mac') && navigator.maxTouchPoints > 1)
-
-// Workaround for Safari automatically scrolling the body when the hidden input is focussed
+// Workaround for browsers automatically scrolling the body when the hidden input is focussed
 const handleScrollReset = () => {
 	document.documentElement.scrollTop = 0
 	document.scrollingElement.scrollTop = 0
 }
 
-// Workaround for Safari to resize the iframe to the proper height
-// as 100vh is not the proper viewport height there
+// Workaround for mobile browsers to resize the iframe to the visual viewport height
+// as visual viewport area - which includes OSK, say - is not propagated to iframes
+// see https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport
 const handleResize = () => {
 	const expectedHeight = window.visualViewport.height ?? document.documentElement.clientHeight
-	const frame = document.getElementById('richdocumentsframe')
-	if (frame) {
+	const frames = document.getElementsByClassName('office-viewer__iframe')
+	for (const frame of frames) {
 		frame.style.maxHeight = expectedHeight + 'px'
 	}
 	const viewer = document.querySelector('.office-viewer')
@@ -36,20 +28,18 @@ const handleResize = () => {
 }
 
 const fixThemAll = () => {
-	if (!isiOS) {
-		return
-	}
 	if (!scrollLock) {
 		return
 	}
+
 	handleScrollReset()
 	handleResize()
 }
 
 const preventDefault = (e) => e.preventDefault()
 
 export const enableScrollLock = () => {
-	if (scrollLock || !isiOS) {
+	if (scrollLock) {
 		return
 	}
 
@@ -65,7 +55,7 @@ export const enableScrollLock = () => {
 }
 
 export const disableScrollLock = () => {
-	if (!scrollLock || !isiOS) {
+	if (!scrollLock) {
 		return
 	}
 

src/view/Office.vue

@@ -99,7 +99,7 @@ import {
 import PostMessageService from '../services/postMessage.tsx'
 import FilesAppIntegration from './FilesAppIntegration.js'
 import { LOADING_ERROR, checkCollaboraConfiguration, checkProxyStatus } from '../services/collabora.js'
-import { enableScrollLock, disableScrollLock } from '../helpers/safariFixer.js'
+import { enableScrollLock, disableScrollLock } from '../helpers/mobileFixer.js'
 import axios from '@nextcloud/axios'
 import {
 	generateUrl,