[GH-ISSUE #1282] Player bar hiden by Safari's interface #735

Closed
opened 2026-02-26 02:34:07 +03:00 by kerem · 12 comments
Owner

Originally created by @FrostyPinkPlume on GitHub (Feb 20, 2021).
Original GitHub issue: https://github.com/koel/koel/issues/1282

Describe the bug
When using Koel with Safari with an Iphone (in my case, an Iphone X R), the Safari's lowest interface hide the player bar.

To reproduce
Steps to reproduce the behavior:

  1. Use Koel with an Iphone X (here, an XR) with Safari

Expected behavior
Using the player bar to pause or change music.

Environment

  • Koel version 5.1.0
  • OS: IOS 14.4
  • Browser Safari
  • Using Hyzual/docker-koel (PHP 7.4.14)

Thank you for this great project, it's awesome !

Originally created by @FrostyPinkPlume on GitHub (Feb 20, 2021). Original GitHub issue: https://github.com/koel/koel/issues/1282 **Describe the bug** When using Koel with Safari with an Iphone (in my case, an Iphone X R), the Safari's lowest interface hide the player bar. **To reproduce** Steps to reproduce the behavior: 1. Use Koel with an Iphone X (here, an XR) with Safari **Expected behavior** Using the player bar to pause or change music. **Environment** - Koel version 5.1.0 - OS: IOS 14.4 - Browser Safari - Using Hyzual/docker-koel (PHP 7.4.14) _Thank you for this great project, it's awesome !_
kerem closed this issue 2026-02-26 02:34:07 +03:00
Author
Owner

@FrostyPinkPlume commented on GitHub (Feb 20, 2021):

It seems like something like this would help :
`

`

But I don't have the slightest idea were to add this in the project

<!-- gh-comment-id:782720443 --> @FrostyPinkPlume commented on GitHub (Feb 20, 2021): It seems like something like this would help : `<meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">` But I don't have the slightest idea were to add this in the project
Author
Owner

@phanan commented on GitHub (Apr 11, 2021):

Thanks for the report. I can't reproduce this bug though (and I'm using an iPhone myself). Can you check with the latest version?

<!-- gh-comment-id:817348628 --> @phanan commented on GitHub (Apr 11, 2021): Thanks for the report. I can't reproduce this bug though (and I'm using an iPhone myself). Can you check with the latest version?
Author
Owner

@FrostyPinkPlume commented on GitHub (Apr 13, 2021):

Sadly, this is not my phone that has that problem, however it appear that this issue also visible using latest verson of firefox for android, even when having the toolbar on the top.

<!-- gh-comment-id:818494956 --> @FrostyPinkPlume commented on GitHub (Apr 13, 2021): Sadly, this is not my phone that has that problem, however it appear that this issue also visible using latest verson of firefox for android, even when having the toolbar on the top.
Author
Owner

@phanan commented on GitHub (Apr 13, 2021):

Please include a screenshot then. I can't really imagine what happens.

<!-- gh-comment-id:818496502 --> @phanan commented on GitHub (Apr 13, 2021): Please include a screenshot then. I can't really imagine what happens.
Author
Owner

@FrostyPinkPlume commented on GitHub (Apr 13, 2021):

When using a chromium based browser (Brave browser in my case), for android, I can bypass this issue by scrolling down the topbar). This, however don't work using firefox for Android.

I'm asking for a screenshot for Safari with the version.

IMG_20210413_090642.jpg

<!-- gh-comment-id:818497367 --> @FrostyPinkPlume commented on GitHub (Apr 13, 2021): When using a chromium based browser (Brave browser in my case), for android, I can bypass this issue by scrolling down the topbar). This, however don't work using firefox for Android. I'm asking for a screenshot for Safari with the version. ![IMG_20210413_090642.jpg](https://user-images.githubusercontent.com/48557328/114511037-afb5e580-9c37-11eb-96b1-37fc7af22eb0.jpg)
Author
Owner

@FrostyPinkPlume commented on GitHub (Apr 13, 2021):

Update : Now using 5.1.0

<!-- gh-comment-id:818500505 --> @FrostyPinkPlume commented on GitHub (Apr 13, 2021): Update : Now using 5.1.0
Author
Owner

@FrostyPinkPlume commented on GitHub (Apr 13, 2021):

And this is the same issur using safari with ios 14.4.2.

IMG_20210413_093615.jpg

<!-- gh-comment-id:818516040 --> @FrostyPinkPlume commented on GitHub (Apr 13, 2021): And this is the same issur using safari with ios 14.4.2. ![IMG_20210413_093615.jpg](https://user-images.githubusercontent.com/48557328/114514646-ccecb300-9c3b-11eb-9461-d8702931f180.jpg)
Author
Owner

@FrostyPinkPlume commented on GitHub (Apr 13, 2021):

Maybe this could be kinda bypassed by having something like
<meta name="apple-mobile-web-app-capable" content="yes" />
and
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

That must resolve the problem by having the interface totally removed using a home-screen link, however, only using IOS.
I heard Safari can use it though....
However, chrome has
<meta name="mobile-web-app-capable" content="yes">

<!-- gh-comment-id:818519591 --> @FrostyPinkPlume commented on GitHub (Apr 13, 2021): Maybe this could be kinda bypassed by having something like `<meta name="apple-mobile-web-app-capable" content="yes" />` and `<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />` That must resolve the problem by having the interface totally removed using a home-screen link, however, only using IOS. I heard Safari can use it though.... However, chrome has `<meta name="mobile-web-app-capable" content="yes">`
Author
Owner

@phanan commented on GitHub (Apr 13, 2021):

Interesting. Indeed, I've been using Edge on iPhone with the assumption that it uses the same Webkit engine as mobile Safari, and this problem doesn't appear.

If you've verified that adding mobile-web-app-capable and apple-mobile-web-app-capable meta works, please open a PR. The tags can be added here: https://github.com/koel/koel/blob/master/resources/views/index.blade.php. Edit: They're already there apparently.

<!-- gh-comment-id:818522079 --> @phanan commented on GitHub (Apr 13, 2021): Interesting. Indeed, I've been using Edge on iPhone with the assumption that it uses the same Webkit engine as mobile Safari, and this problem doesn't appear. If you've verified that adding `mobile-web-app-capable` and `apple-mobile-web-app-capable` meta works, please open a PR. The tags can be added here: https://github.com/koel/koel/blob/master/resources/views/index.blade.php. Edit: They're already there apparently.
Author
Owner

@FrostyPinkPlume commented on GitHub (Apr 13, 2021):

I'll try when at home.

Edit :

True, there is mobile-web-app-capable

Using :

  • Brave for Android : creating a home-screen link work perfectly fine (it's like launching an app)
  • Firefox for Android : creating a home-screen link just open the browser like usual.
  • Chrome for Android : creating a home-screen link work perfectly fine (it's like launching an app) (no surprise since Brave and Chrome share the same core)
  • Safari for IOS : creating a home-screen link just open the browser like usua but it may be because apple-mobile-web-app-capable is missing
<!-- gh-comment-id:818523781 --> @FrostyPinkPlume commented on GitHub (Apr 13, 2021): I'll try when at home. Edit : True, there is `mobile-web-app-capable` Using : - Brave for Android : creating a home-screen link work perfectly fine (it's like launching an app) - Firefox for Android : creating a home-screen link just open the browser like usual. - Chrome for Android : creating a home-screen link work perfectly fine (it's like launching an app) (no surprise since Brave and Chrome share the same core) - Safari for IOS : creating a home-screen link just open the browser like usua but it may be because `apple-mobile-web-app-capable` is missing
Author
Owner

@phanan commented on GitHub (May 7, 2021):

Sorry for the late response. So does apple-mobile-web-app-capable fix the problem? If it does, can you create a PR?

<!-- gh-comment-id:834758821 --> @phanan commented on GitHub (May 7, 2021): Sorry for the late response. So does `apple-mobile-web-app-capable` fix the problem? If it does, can you create a PR?
Author
Owner

@phanan commented on GitHub (Oct 18, 2022):

This shouldn't be a problem anymore.

<!-- gh-comment-id:1282465857 --> @phanan commented on GitHub (Oct 18, 2022): This shouldn't be a problem anymore.
Sign in to join this conversation.
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#735
No description provided.