starred/koel-koel

Fork 0

mirror of https://github.com/koel/koel.git synced 2026-04-26 01:06:00 +03:00

[GH-ISSUE #1887] [Bug]: Safari Input Zoom #1021

New issue

Closed

opened 2026-02-26 02:34:58 +03:00 by kerem · 1 comment

kerem commented

2026-02-26 02:34:58 +03:00

Owner

Originally created by @lafllamme on GitHub (Dec 9, 2024).
Original GitHub issue: https://github.com/koel/koel/issues/1887

Originally assigned to: @phanan on GitHub.

Read the Troubleshooting guide.

I have read and followed the Troubleshooting guide

Reproduction steps

Open Koel within Safari Browser on iOS
Focus or Tab in any input field
Auto zoom happens

Expected behavior

Issue Description

When using the Koel music player on Safari (iPad, iPhone, iPod), the browser zooms in on input fields when they are focused. This behavior disrupts the user experience by causing unintended zoom levels.

This issue occurs because Safari automatically zooms in when the font size of input fields is less than 16px. While this feature improves accessibility, it is undesirable for certain applications like Koel, where the layout is designed for precise responsiveness.

Proposed Solution

To address this issue, we only need to add a specific <meta> tag in the HTML <head> section to configure the viewport for Safari browsers.

We suggest adding the following viewport meta tag dynamically for Safari browsers (iPad, iPhone, iPod) using a regular expression to detect the Safari user agent:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

This tag will:

Prevent Safari from zooming in on input fields.
Maintain the intended user experience without affecting other browsers.

Implementation Steps

Detect Safari using a JavaScript regular expression.
Dynamically insert the <meta> tag only for Safari browsers.

Below is the JavaScript code to implement this:

if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
  const metaViewport = document.querySelector("meta[name=viewport]");
  if (!metaViewport) {
    const metaTag = document.createElement("meta");
    metaTag.name = "viewport";
    metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no";
    document.head.appendChild(metaTag);
  }
}

Why This Solution?

Browser-specific: Targets only Safari without affecting other browsers.
Non-invasive: Dynamically adds the viewport tag, ensuring minimal disruption to existing code.
Performance-friendly: Regular expression checks are lightweight and executed only once during page load.

Testing

Open Koel on Safari (iPad, iPhone, iPod).
Focus on any input field and confirm that the zoom issue no longer occurs.
Verify that the behavior on non-Safari browsers (e.g., Chrome, Firefox) remains unaffected.

Notes

This solution has been tested on:

iPad (Safari)
iPhone (Safari)
Desktop Safari

Let us know if further adjustments are required or if additional testing is needed!

Actual behavior

No Zoom, Intial Browser Scale

Logs

No response

Koel version

Latest

How did you install Koel?

Official Docker image

Additional information

Server OS:
PHP version:
Database:
Node version:
Browser & device:
Additional context:

Originally created by @lafllamme on GitHub (Dec 9, 2024). Original GitHub issue: https://github.com/koel/koel/issues/1887 Originally assigned to: @phanan on GitHub. ### Read the Troubleshooting guide. - [X] I have read and followed the Troubleshooting guide ### Reproduction steps 1) Open Koel within Safari Browser on iOS 2) Focus or Tab in any input field 3) Auto zoom happens ![IMG_0240](https://github.com/user-attachments/assets/34ab1c63-e4dc-4ffd-b526-2258fdbf0bf9) ### Expected behavior ### Issue Description When using the Koel music player on Safari (iPad, iPhone, iPod), the browser zooms in on input fields when they are focused. This behavior disrupts the user experience by causing unintended zoom levels. This issue occurs because Safari automatically zooms in when the font size of input fields is less than 16px. While this feature improves accessibility, it is undesirable for certain applications like Koel, where the layout is designed for precise responsiveness. ### Proposed Solution To address this issue, we only need to add a specific `<meta>` tag in the HTML `<head>` section to configure the viewport for Safari browsers. We suggest adding the following viewport meta tag dynamically for Safari browsers (iPad, iPhone, iPod) using a regular expression to detect the Safari user agent: ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> ``` This tag will: - Prevent Safari from zooming in on input fields. - Maintain the intended user experience without affecting other browsers. ### Implementation Steps 1. Detect Safari using a JavaScript regular expression. 2. Dynamically insert the `<meta>` tag only for Safari browsers. Below is the JavaScript code to implement this: ```javascript if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) { const metaViewport = document.querySelector("meta[name=viewport]"); if (!metaViewport) { const metaTag = document.createElement("meta"); metaTag.name = "viewport"; metaTag.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"; document.head.appendChild(metaTag); } } ``` ### Why This Solution? - **Browser-specific:** Targets only Safari without affecting other browsers. - **Non-invasive:** Dynamically adds the viewport tag, ensuring minimal disruption to existing code. - **Performance-friendly:** Regular expression checks are lightweight and executed only once during page load. ### Testing 1. Open Koel on Safari (iPad, iPhone, iPod). 2. Focus on any input field and confirm that the zoom issue no longer occurs. 3. Verify that the behavior on non-Safari browsers (e.g., Chrome, Firefox) remains unaffected. ### Notes This solution has been tested on: - iPad (Safari) - iPhone (Safari) - Desktop Safari Let us know if further adjustments are required or if additional testing is needed! ### Actual behavior No Zoom, Intial Browser Scale ### Logs _No response_ ### Koel version Latest ### How did you install Koel? Official Docker image ### Additional information - **Server OS**: - **PHP version**: - **Database**: - **Node version**: - **Browser & device**: - **Additional context**:

kerem closed this issue

2026-02-26 02:34:58 +03:00

kerem commented

2026-02-26 02:34:59 +03:00

Author

Owner

@phanan commented on GitHub (Dec 9, 2024):

Thanks, but the "solution" will just disable zooming altogether. I'd rather leave things as-is.

@phanan commented on GitHub (Dec 9, 2024): Thanks, but the "solution" will just disable zooming altogether. I'd rather leave things as-is.

kerem referenced this issue

2026-02-26 03:31:21 +03:00

[PR #1021] [MERGED] Bump lodash.mergewith from 4.6.1 to 4.6.2 #1528

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/koel-koel#1021

No description provided.

Rows
Columns