Is there a way to always have the content split in 2 equal parts

Design help General
1

Thanks for infos get’s a bit more clear.

Yet I have an issue.
I have 2 stacked panels that are set for tablet and mobile to be 50VH height.
But on my iPhone 6S the bottom panel falls out of the viewport and the page gets a scroll.
If I scroll to reach bottom of content, then the Ui addressbar minimize and page looks like it should be.

Is there a way to always have the content split in 2 equal parts, no matter the UI browser bars?

thanks

2

It’s rather “but on Safari mobile”. Safari mobile don’t account for the collapsible top and bottom bar in the calculation of its viewport. Which end up with the mess you’re describing. This is… quite difficult to work around. I regularly look for a simple solution, with no result. So this isn’t a bug, this is something that Apple makes difficult for us to deal with. 100vh on iPhone is difficult. This is intentional and prevent a lot of other problems. https://bugs.webkit.org/show_bug.cgi?id=141832

When Apple designed Safari, they had for #1 goal to preserve the maximum screen estate possible. By resorting to collapsible pieces of UI, they couldn’t possibly decide to take them into account of the viewport height, that would have meant dynamically changing it during the animation of the UI, at 60fps. Not imaginable.

2 Likes
3

Thanks a lot for this precise answer @vincent !
Knowing it’s “normal” and hard to fix, i’ll just bare with it :slight_smile:

Cheers!

1 Like