search

anstosa / ferry.fyi

A better tracker for the Washington State Ferry System
https://ferry.fyi
GNU General Public License v3.0
11 stars 3 forks source link

Footer menu style is broken when loaded from iphone home screen #57

Open hslee33754 opened 2 years ago

hslee33754 commented 2 years ago
image

OS: iOS 15.3.1 Browser: Safari (home screen) Repro Steps:

  1. Open https://www.ferry.fyi on iPhone Safari
  2. Click the share icon from the url bar
  3. Click "Add to Home Screen"
  4. Open the page from the added home screen button
  5. click any location to display footer menus

Footer menu style is broken when the page is loaded from the iPhone home screen. It looks fine when it is opened on a regular safari tab or other browsers. I did a little debugging and it looks like the env(safe-area-inset-XXXXX) values break the style.

Overwriting values to 0 on margin bottom on the Footer and the padding top and bottom on the child fixes it.

It might need to use a media query of [display-mode: standalone](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/display-mode) to make the spacing values conditional.

anstosa commented 2 years ago

Thanks for the debugging @hslee33754 ! Super helpful since I don't have an iPhone 😊

hslee33754 commented 2 years ago

@anstosa Thank YOU for building this app. I've been wanting to build something like this, and I am loving it!

anstosa commented 2 years ago

Just pushed a potential fix based on your comment. Can't test so let me know if it works!

You may have to close the app from your recents and re-open it once or twice for the service worker to pick up the changes