History popup cropped on bottom

[akloeckner]

I found that my popups are cropped at the bottom, when their height hits the max-height:

It can be fixed by subtracting 60px in custom css:

.popup--tiles {
  max-height: calc(100vh - 50px - 80px - 30px - 62px); 
  border: 1px solid red;
}

It's easiest testable by opening a history popup on mobile and turning your phone to landscape. Both in Chrome and Firefox. I am pretty sure, this was correct when I migrated history popup to the modular popup.

Do you see this, too? Or is it some strange setting of mine, which I just didn't find?

If it's a real issue: why 60px?!

[rchl]

Can you reproduce this in a Desktop browser (using mobile mode and switching orientation if needed)? I can't seem to be able to reproduce on Desktop at least.

[akloeckner]

I'll try this weekend. How can I switch Firefox to mobile mode? Or is it just the screen size in the developer's tools?

[rchl]

[akloeckner]

I don't have that issue in Firefox Desktop. I tried the mobile view and even switched to touch simulation.

I also realized that I don't have the issue in my mobile WebApp either, i.e., when I load tileboard through the shortcut and no browser title is displayed on my phone (which btw. is new since not so long ago, not sure if ou changed something or firefox). If I load tileboard with a browser title bar, the problem appears. Be it in Firefox mobile, in Chrome mobile or in Chrome Webapp. Sometimes, even the background is cropped. I'll upload some pictures.

[akloeckner]

Firefox WebApp

Firefox

Chrome Webapp

Chrome

[akloeckner]

Maybe related:
https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

TL;DR: vh is not the visible area, but the full mobile screen for Chrome. It can be circumvented with JS. Maybe that behavior changed recently in Firefox, too. As apparently did the WebApp default appearance regarding the navigation bar.

[rchl]

That sliding toolbar in chrome has some magic to it. I sometimes see such issue on normal pages.

[akloeckner]

I tested the solution from my link above. It works for the popup. Would you approve such a solution in app.js? It seems to be the accepted solution in all discussions I have seen.

However, I haven't solved the cropped background in the Firefox screenshot yet. Still investigating...

[rchl]

I'm fine with adding some workaround for this.

Or maybe this approach mentioned in the article will work as well:

There is another fix for this that has come along more recently. Matt Smith documents it here. The trick is min-height: -webkit-fill-available; on the body as a progressive enhancement over 100vh, which should work on iOS devices.

Seems a bit cleaner.

And whatever you do, consider browsers that don't support vh and other new APIs and do it in a "progressive enhancement" way so that it helps new browsers but doesn't break old ones.