fix(android): match iframe size to visual viewport

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 { 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 {
@@ -37,7 +37,7 @@
 const checkProxyStatus = () => {
 	checkingProxyStatus = true
 	const url = Config.get('urlsrc').slice(0, Config.get('urlsrc').indexOf('proxy.php') + 'proxy.php'.length)
 	$.get(url + '?status').done(function(val) {
 		if (val && val.status && val.status !== 'OK') {
 			if (val.status === 'starting' || val.status === 'stopped') {
 				document.getElementById('proxyLoadingIcon').classList.add('icon-loading-small')
@@ -150,8 +150,8 @@
 		showViewer(fileId, title) {
 			// remove previous viewer, if open, and set a new one
 			if (documentsMain.isViewerMode) {
 				$('#revViewer').remove()
 				$('#revViewerContainer').prepend($('<div id="revViewer">'))
 			}
 
 			const urlsrc = getWopiUrl({ fileId, title, readOnly: true, closeButton: !documentsMain.hideCloseButton })
@@ -176,22 +176,22 @@
 			// iframe that contains the Collabora Online Viewer
 			const frame = '<iframe data-cy="coolframe" id="loleafletframe" name="loleafletframe_viewer" allowfullscreen allow="clipboard-read *; clipboard-write *" nonce="' + btoa(getRequestToken()) + '" style="width:100%;height:100%;position:absolute;" title="' + getCapabilities().productName + '"/>'
 
 			$('#revViewer').append(form)
 			$('#revViewer').append(frame)
 			$('#loleafletframe_viewer').focus()
 
 			// submit that
 			$('#loleafletform_viewer').submit()
 			documentsMain.isViewerMode = true
 			// for closing revision mode
 			$('#revViewerContainer .closeButton').click(function(e) {
 				e.preventDefault()
 				documentsMain.onCloseViewer()
 			})
 		},
 
 		loadRevViewerContainer() {
 			if (!$('revViewerContainer').length) {
 				$(document.body).prepend(documentsMain.UI.viewContainer)
 				const closeButton = $('<button class="icon-close closeButton" title="' + t('richdocuments', 'Close version preview') + '"/>')
 				$('#revViewerContainer').prepend(closeButton)

src/helpers/safariFixer.js → 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,