fix(android): match iframe size to visual viewport #5137
Merged
+13
−23
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Minion3665
force-pushed
the
private/minion/push-rmmvnkvqyynr
branch
from
7e64cea to
c3150d1
Compare
6 tasks
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 <[email protected]>
Minion3665
force-pushed
the
private/minion/push-rmmvnkvqyynr
branch
from
c3150d1 to
7aa9de4
Compare
Contributor
Author
|
(I noticed that Chrome on Android can sometimes fall into the same scrolling behavior - so the whole mobileFixer file is generic and we don't need to check for iOS at all anymore :)) |
When resizing the frame on mobile we correctly resize the outer <div> element. We used to also resize the frame, but in ba45233 (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 <[email protected]>
This CSS was intended to apply to the Collabora iframe, however the ID of that was updated to be random in ba45233 (chore: refactor iframes to load collabora directly, 2023-06-11) and this code didn't follow... Signed-off-by: Skyler Grey <[email protected]>
Contributor
Author
|
(and I noticed the IDs for the frame were out of date. I've updated those too - both in the place where I know it's needed in one commit, and everywhere else in a second) |
juliusknorr
approved these changes
Nov 17, 2025
Member
|
/backport to stable32 |
Member
|
/backport to stable31 |
Member
|
/backport to stable30 |
Member
|
/backport to stable29 |
Minion3665
added a commit
to CollaboraOnline/online
that referenced
this pull request
Nov 18, 2025
This is a very similar change to nextcloud/richdocuments#5137, which resized our iframe when we opened the onscreen keyboard. This does the same change for all our viewport specifiers (although I note that the cool.html.m4 change will have no effect for integrators since as this option has no effect when used in an iframe...) Not finding some way to resize the content when the keyboard is popped up has the following undesireable effects: - Focusing the hidden input causes the page to shift up and down on some devices as not all of it fits on the screen at once and some browsers want to keep the hidden input "in view" - #13274 is ineffective, as you can't detect the height of the screen properly - The bottom toolbar is almost always hidden behind the keyboard (in portrait or landscape) Signed-off-by: Skyler Grey <[email protected]> Change-Id: I4d5a0c09c2130f92a0711ad731cad9e96a6a6964
Minion3665
added a commit
to CollaboraOnline/online
that referenced
this pull request
Nov 18, 2025
This is a very similar change to nextcloud/richdocuments#5137, which resized our iframe when we opened the onscreen keyboard. This does the same change for all our viewport specifiers (although I note that the cool.html.m4 change will have no effect for integrators since as this option has no effect when used in an iframe...) Not finding some way to resize the content when the keyboard is popped up has the following undesireable effects: - Focusing the hidden input causes the page to shift up and down on some devices as not all of it fits on the screen at once and some browsers want to keep the hidden input "in view" - #13274 is ineffective, as you can't detect the height of the screen properly - The bottom toolbar is almost always hidden behind the keyboard (in portrait or landscape) Signed-off-by: Skyler Grey <[email protected]> Change-Id: I4d5a0c09c2130f92a0711ad731cad9e96a6a6964
6 tasks
Contributor
|
Hello there, We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process. Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6 Thank you for contributing to Nextcloud and we hope to hear from you soon! (If you believe you should not receive this message, you can add yourself to the blocklist.) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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:
(Quote from VisualViewport page on MDN Docs, by Mozilla Contributors under CC-BY-SA v2.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, part of 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.jsas wellFinally, it's worth noting that this doesn't work in every browser I tested. Notably 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"andcontent="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...Summary
TODO
Checklist