Positioning Bug: Positioning bottom center on safari doesn't maintain position when the browser bars hide.

[danieliser]

Positioning Bug: Positioning bottom center on safari doesn't maintain position when the browser bars hide.

This ticket concluded that the popup is being positioned at the bottom using CSS top positioning. Forcing bottom fixed it.

https://secure.helpscout.net/conversation/773215298/11145/#thread-2230331500

[webprom]

Helped me

.pum-theme-xxx.pum-theme-cutting-edge #popmake-xxx.pum-container {
  top: auto !important;
  bottom: 0 !important;
  margin-bottom: 0;
}

[danieliser]

I believe thats a confrimation that this solution will work.

[webprom]

not very smooth when safari bottom bar is hiding, but better than from top, because now when bottom bar is hiding, popup is not staying at the bottom at all.

[danieliser]

Try adding

.pum-theme-xxx.pum-theme-cutting-edge #popmake-xxx.pum-container {
  top: auto !important;
  bottom: 0 !important;
  margin-bottom: 0;
  transition: bottom .5s;
}

IDK if it will animate bottom on that scenario or not but worth a try to smooth it out.

[webprom]

good idea! thanks.

[danieliser]

As this is a rare issue, punting this to v1.10 so we can decide exactly how we want to proceed. We are already planning to rewrite our positoning logic, so this could fall into that.

[webprom]

Hi!

Finally found how to fix the issue with a popup jumps at the bottom.

I've disabled "fixed position" in popup settings > display > position. Then just added fixed position again from CSS below, and it stopped jumping when the bar is activating/hiding on iOS.

.pum-container { top: auto !important; bottom: 0px !important; margin: 0 !important; position: fixed !important; }

So this works perfectly now.