PWA: on iOS, the viewport keeps automatically zooming in when editing or writing text #5534

New Issue

OVERLORD · 2026-02-05T10:09:19+03:00

OVERLORD commented

2026-02-05 10:09:19 +03:00

Originally created by @kraashen on GitHub (Dec 5, 2025).

Describe the Bug

On iOS, the PWA view keeps zooming in when editing pages and tapping on the text areas. This seems to originate from that by default, iOS zooms on the text field when pixel size is less than 16px.

This results in situation where:

Save button gets hidden from the view
Toolbar is shown only partially
Left side tools get hidden
Requires manual zooming out to find the tools and save button again

While searching for the issue, this seems to be a relatively common issue with any PWA apps. There seems to be multiple ways to solve this, but not all downsides were immediate for me. Same behavior is reproduced on every text field including but not limited to:

Login screen
Search box
Shelf/book description and detail fields

Some solutions included:

Detect iOS user agent and
- use 16px as minimum font size in the editor view
- OR
- Set certain viewport meta tags such as user-editable=0 and maximum-scale=1 to prevent the browser from zooming in when using it as a PWA app

Steps to Reproduce

iPhone Air
iOS 26.1

Pin Bookstack as an app from mobile browser
Open PWA
Navigate to any page
Enter editing mode
Tap the text view

Expected Behaviour

The editor view stays at full width without zooming in to the text field.

Screenshots or Additional Context

Tested also the beta preview of the editor, and same behavior seemed to occur.

Browser Details

Firefox/Safari on iOS + pin app as PWA

Exact BookStack Version

v25.11

Originally created by @kraashen on GitHub (Dec 5, 2025). ### Describe the Bug On iOS, the PWA view keeps zooming in when editing pages and tapping on the text areas. This seems to originate from that by default, iOS zooms on the text field when pixel size is less than 16px. This results in situation where: - Save button gets hidden from the view - Toolbar is shown only partially - Left side tools get hidden - Requires manual zooming out to find the tools and save button again While searching for the issue, this seems to be a relatively common issue with any PWA apps. There seems to be multiple ways to solve this, but not all downsides were immediate for me. Same behavior is reproduced on every text field including but not limited to: - Login screen - Search box - Shelf/book description and detail fields Some solutions included: - Detect iOS user agent and - use 16px as minimum font size in the editor view - OR - Set certain viewport meta tags such as `user-editable=0` and `maximum-scale=1` to prevent the browser from zooming in when using it as a PWA app ### Steps to Reproduce iPhone Air iOS 26.1 1. Pin Bookstack as an app from mobile browser 2. Open PWA 3. Navigate to any page 4. Enter editing mode 5. Tap the text view ### Expected Behaviour The editor view stays at full width without zooming in to the text field. ### Screenshots or Additional Context Tested also the beta preview of the editor, and same behavior seemed to occur. ### Browser Details Firefox/Safari on iOS + pin app as PWA ### Exact BookStack Version v25.11

OVERLORD added the 🐛 Bug label 2026-02-05 10:09:19 +03:00

OVERLORD commented

2026-02-05 10:09:22 +03:00

@kraashen commented on GitHub (Dec 5, 2025):

Didn't realize this earlier, but the behavior reproduces on any text input field. Modified the original issue to reflect this finding.

@kraashen commented on GitHub (Dec 5, 2025): Didn't realize this earlier, but the behavior reproduces on any text input field. Modified the original issue to reflect this finding.

OVERLORD commented

2026-02-05 10:09:23 +03:00

@kraashen commented on GitHub (Dec 5, 2025):

This hack in the Custom HTML Head Content seems work as a workaround, though might still miss some user editable fields.

<style>
    @media screen and (max-width: 880px) {
        body.ios-client input,
        body.ios-client textarea,
        body.ios-client select,
        body.ios-client .search-box,
        body.ios-client .cm-editor,
        body.ios-client .editor-content-area,
        .mce-content-body {
            font-size: 1.15rem !important;
        }
    }
</style>
<script>
    const iOS = /iPad|iPhone/.test(navigator.userAgent) || (navigator.userAgent.includes("Mac") && "ontouchend" in document);
    if (iOS) {
      document.addEventListener("DOMContentLoaded", function() {
        if (!document.body.classList.contains("ios-client")) {
          document.body.classList.add("ios-client");
        }
      });
    }
</script>

EDIT: However as MDN documentation notes, this is quite suboptimal way to circumvent around it and other methods should be used instead, but not sure if this is iOS specific issue.

@kraashen commented on GitHub (Dec 5, 2025): This hack in the Custom HTML Head Content seems work as a workaround, though might still miss some user editable fields. ```html <style> @media screen and (max-width: 880px) { body.ios-client input, body.ios-client textarea, body.ios-client select, body.ios-client .search-box, body.ios-client .cm-editor, body.ios-client .editor-content-area, .mce-content-body { font-size: 1.15rem !important; } } </style> <script> const iOS = /iPad|iPhone/.test(navigator.userAgent) || (navigator.userAgent.includes("Mac") && "ontouchend" in document); if (iOS) { document.addEventListener("DOMContentLoaded", function() { if (!document.body.classList.contains("ios-client")) { document.body.classList.add("ios-client"); } }); } </script> ``` EDIT: However as [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Browser_detection_using_the_user_agent#alternatives_to_ua_sniffing) notes, this is quite suboptimal way to circumvent around it and other methods should be used instead, but not sure if this is iOS specific issue.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#5534