From 7aa9de4f2fb35fdb010fc93b5845f5021b0a3fda Mon Sep 17 00:00:00 2001
From: Skyler Grey <skyler.grey@collabora.com>
Date: Tue, 4 Nov 2025 14:47:38 +0000
Subject: [PATCH 1/3] fix(android): match iframe size to visual viewport

I've been testing Collabora Online with Nextcloud on Android, and I've
noticed some content displaying behind the onscreen keyboard as follows:

There are two viewports on the web, the "visual" viewport (what you
actually see) and the "layout" viewport (how the browser draws the
page). The onscreen keyboard popping up used to resize the layout
viewport. In newer Android versions, the onscreen keyboard by default
resizes the visual viewport rather than the layout viewport.

Unfortunately, the visual viewport isn't propagated through iframes, as
per MDN docs which state:

> Only the top-level window has a visual viewport that's distinct from
> the layout viewport. Therefore, it's generally only the VisualViewport
> object of the top-level window that's useful. For an <iframe>, visual
> viewport metrics like VisualViewport.width always correspond to layout
> viewport metrics like document.documentElement.clientWidth.

(Quote from [VisualViewport page on MDN Docs][VV], by Mozilla
Contributors under [CC-BY-SA v2.5][VVLICENSE])

[VV]: https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport
[VVLICENSE]: https://creativecommons.org/licenses/by-sa/2.5/

This leads to Collabora Online seeing the viewport as the size of its
iframe in all cases. When the onscreen keyboard is up, this causes some
parts of the app (the bottom toolbar) to be hidden as they are behind
the keyboard. The intention is for this toolbar to instead float above
the keyboard.

I've done some investigation and this would be a problem on
iOS/iPadOS too... it would be, except Julius has already written
code to fix it (thanks Julius!). The code I'm talking about was in
`src/helpers/safariFixer.js`, its job was to resize the richdocuments
frame in place of the browser. It was previously gated to only running
on iOS, but we can make it broader so it encompasses all browsers -
including those running on Android devices.

If we change that code to fix things other than Safari, the name no
longer makes sense. Therefore, let's rename it to `mobileFixer.js` as
well

Finally, it's worth noting that this doesn't work in every browser
I tested. Notably [Fennec][FENNEC] doesn't appear to correctly
resize the visual viewport so this fix doesn't work over there.
Notwithstanding, this fix does appear to work in both Play Store
Chrome and Play Store Firefox which is a lot better than not
working at all. Potential fixes for Fennec were considered possibly
too risky: we could set a meta tag with `name="viewport"` and
`content="interactive-widget=resizes-content"` but this would need
to be set even when richdocuments isn't in use (or isn't installed!).
Therefore, we'll have to cope with the state of things as they are for
now...

[FENNEC]: https://f-droid.org/en/packages/org.mozilla.fennec_fdroid/

Signed-off-by: Skyler Grey <skyler.grey@collabora.com>
---
 src/document.js                               |  2 +-
 .../{safariFixer.js => mobileFixer.js}        | 24 ++++++-------------
 src/view/Office.vue                           |  2 +-
 3 files changed, 9 insertions(+), 19 deletions(-)
 rename src/helpers/{safariFixer.js => mobileFixer.js} (75%)

diff --git a/src/document.js b/src/document.js
index 17f0c0cb4..60f923496 100644
--- a/src/document.js
+++ b/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 {
diff --git a/src/helpers/safariFixer.js b/src/helpers/mobileFixer.js
similarity index 75%
rename from src/helpers/safariFixer.js
rename to src/helpers/mobileFixer.js
index adf34f1f0..645b32ad4 100644
--- a/src/helpers/safariFixer.js
+++ b/src/helpers/mobileFixer.js
@@ -6,23 +6,15 @@
 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')
@@ -36,12 +28,10 @@ const handleResize = () => {
 }
 
 const fixThemAll = () => {
-	if (!isiOS) {
-		return
-	}
 	if (!scrollLock) {
 		return
 	}
+
 	handleScrollReset()
 	handleResize()
 }
@@ -49,7 +39,7 @@ const fixThemAll = () => {
 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
 	}
 
diff --git a/src/view/Office.vue b/src/view/Office.vue
index 1a699392c..c4b351fa9 100644
--- a/src/view/Office.vue
+++ b/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,

From 3864969204e53c2ca0190f58f453909a8eefbf8d Mon Sep 17 00:00:00 2001
From: Skyler Grey <skyler.grey@collabora.com>
Date: Wed, 5 Nov 2025 12:07:00 +0000
Subject: [PATCH 2/3] fix(mobile): update resized frame ID

When resizing the frame on mobile we correctly resize the outer <div>
element. We used to also resize the frame, but in ba45233bf (chore:
refactor iframes to load collabora directly, 2023-06-11) the ID of the
iframe was changed without things that depended on it also changing.

In Chrome, this causes the issue that the iframe isn't resized all the
way down, leading to it being possible to scroll the iframe inside the
viewport. This is bad as it means some elements of Collabora Online that
are meant to be stuck to different parts of the screen can go off the
screen edge.

There are some bits of CSS which also refer to this ID. To aid in easy
partial reverting (and as I don't currently have a need for them) I have
not fixed them in this commit

Signed-off-by: Skyler Grey <skyler.grey@collabora.com>
---
 src/helpers/mobileFixer.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/helpers/mobileFixer.js b/src/helpers/mobileFixer.js
index 645b32ad4..2de2cd1ba 100644
--- a/src/helpers/mobileFixer.js
+++ b/src/helpers/mobileFixer.js
@@ -17,8 +17,8 @@ const handleScrollReset = () => {
 // 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')

From f496a79138e6ab9426572a1264379f307bb70804 Mon Sep 17 00:00:00 2001
From: Skyler Grey <skyler.grey@collabora.com>
Date: Wed, 5 Nov 2025 12:17:56 +0000
Subject: [PATCH 3/3] fix(mobile): update CSS class names

This CSS was intended to apply to the Collabora iframe, however the ID
of that was updated to be random in ba45233bf (chore: refactor iframes
to load collabora directly, 2023-06-11) and this code didn't follow...

Signed-off-by: Skyler Grey <skyler.grey@collabora.com>
---
 css/files.scss | 2 +-
 css/mobile.css | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/css/files.scss b/css/files.scss
index 01bab0874..d05fa7b46 100644
--- a/css/files.scss
+++ b/css/files.scss
@@ -23,7 +23,7 @@
 	opacity: 1;
 }
 
-#richdocumentsframe {
+.office-viewer__iframe {
 	background-color: #fff;
 	width:100%;
 	height: 100vh;
diff --git a/css/mobile.css b/css/mobile.css
index c7ef3151e..8195d7fd8 100644
--- a/css/mobile.css
+++ b/css/mobile.css
@@ -15,7 +15,7 @@
 		padding-top: 0;
 	}
 
-	#richdocumentsframe {
+	.office-viewer__iframe {
 		height: 100%;
 		position: fixed;
 	}