Last Page of PDF cut off on Android Mobile

[miaulalala]

Steps to reproduce

1. Open c.nc on Android Chrome Mobile
2. open a multi page PDF
3. Scroll to last page
4. See that last page is cut off if software menu bar is enabled

Expected behaviour

The pdf is scrollable all the way

Actual behaviour

Scroll stops too early:

Server configuration

C.nc Operating system:

Web server:

Database:

PHP version:

Nextcloud version: (see Nextcloud admin page)

Where did you install Nextcloud from:

List of activated apps:

If you have access to your command line run e.g.:
sudo -u www-data php occ app:list
from within your Nextcloud installation folder

Nextcloud configuration:

If you have access to your command line run e.g.:
sudo -u www-data php occ config:list system
from within your Nextcloud installation folder

or

Insert your config.php content here
Make sure to remove all sensitive content such as passwords. (e.g. database password, passwordsalt, secret, smtp password, …)

Client configuration

Browser:

Operating system:

Logs

Nextcloud log (data/owncloud.log)

Insert your Nextcloud log here

Browser log

Insert your browser log here, this could for example include:

a) The javascript console log
b) The network log
c) ...

[orangkucing]

iOS has a similar issue: not only the last page of PDF cut off but also the top menu overlapped PDF title. For iOS the bug is fixed by the following patch to src/views/PDFView.vue.

--- PDFView.vue-dist    2024-02-12 19:44:16.084098589 +0900
+++ PDFView.vue 2024-02-12 20:24:02.282003772 +0900
@@ -187,7 +187,9 @@
 iframe {
    width: 100%;
    height: calc(100vh - var(--header-height));
+   height: calc(100dvh - var(--header-height));
    margin-top: var(--header-height);
+   top: calc(var(--header-height) * -1);
    position: absolute;
 }

Hope this helps Androids, too.

[orangkucing]

Sorry. I forgot to include one more part:

--- PDFView.vue-dist    2024-02-12 19:44:16.084098589 +0900
+++ PDFView.vue 2024-02-13 16:46:28.348357490 +0900
@@ -68,9 +68,9 @@
        if (isPublicPage() && isPdf()) {
            // Force style for public shares of a single PDF file, as there are
            // no CSS selectors that could be used only for that case.
-           this.$refs.iframe.style.height = '100%'
-           this.$refs.iframe.style.position = 'absolute'
-           this.$refs.iframe.style.marginTop = 'unset'
+           //this.$refs.iframe.style.height = '100%'
+           //this.$refs.iframe.style.position = 'absolute'
+           //this.$refs.iframe.style.marginTop = 'unset'
        }

        this.doneLoading()
@@ -187,7 +187,9 @@
 iframe {
    width: 100%;
    height: calc(100vh - var(--header-height));
+   height: calc(100dvh - var(--header-height));
    margin-top: var(--header-height);
+   top: calc(var(--header-height) * -1);
    position: absolute;
 }

[joshtrichards]

Hi @orangkucing - Feel up to submitting that as a PR for formal review?

[orangkucing]

Hi @joshtrichards, I've just made a PR #1070 for formal review.