iOS17 PWA `position: fixed` element breaks after a while

I have a menu bar which overlays a body scroll in my PWA with styling:

position: fixed;
bottom: 0px;

This works fine after launching the PWA. In addition to scrolling my app also has a dialog overlay which is invoked many times during regular use.

The bug: After a few hours of mixed use and backgrounding the app, the position fixed bottom does not stick to the bottom of the page when scrolled down. It is almost as if there is an invisible Safari navbar that pushes the viewport up (the PWA forgets it's not in Safari? :)).

On scroll down With the dialog open

This one is a bit tedious, but I am able to consistently reproduce it on my app following these steps and with also with a stripped down HTML:

  1. Create a PWA app on a iOS17 device with the following html:

https://github.com/apsm100/ios17-pwa-position-fixed-bug/blob/main/index.html

  1. Open the app and open and close the dialog a few times.
  2. Leave the app open in the background for a few hours and periodically open it up to test scrolling up and down and opening and closing the dialog.
  3. Eventually you will see the bug.

I am not entirely sure if the dialog has any role in this, I haven't gotten that far in testing. Since I use my app daily I would say it happens about after an hour of backgrounding and a few minutes of use.

Thank you!

Post not yet marked as solved Up vote post of apsm100 Down vote post of apsm100
981 views
Posted by
apsm100
Reply
Add a Comment

Replies

Today I came across on the same issue. In my case the problem was about applying position: fixed to <body> element by shadcn Drawer package. When I opened the bottom drawer, that library updates position of the body and only in iOS PWA the bottom bar together with drawer content has been shifted.

Screenshot:

I've managed to fix it by adding height on the root HTML element:

html {
  min-height: calc(100% + env(safe-area-inset-top));
}

How it look after:

Posted by
Sakhniuk
Up vote reply of Sakhniuk Down vote reply of Sakhniuk
Add a Comment

@Sakhniuk Thank you for sharing. I don't think that is the bug I am mentioning. My layout is as expected with the PWA at launch and for most of its use. The layout only breaks when the app is left running for some time.

Here is my app with a fixed bottom bar, the layout is correct, on scroll the bottom bar remains fixed to the bottom:

Here is my app on scroll down some time later (a few hours), the bottom bar shifts up.

Posted by
apsm100
Up vote reply of apsm100 Down vote reply of apsm100
Add a Comment