Rendering of the navigation pane on iPad is shifted down

[ilg-ul]

I noticed a small problem with rendering the generated site on an iPad: the navigation pane seems shifted down and the last link is not visible:

When rendered with Safari on macOS, it is ok:

The site was generated with 0.23.25.

[ilg-ul]

On iPhone it is also ok:

[Gerrit0]

I don't have an iPad suitable for troubleshooting this - PR welcome

[ilg-ul]

I have the iPad, but I don't have a CSS knowledge suitable for troubleshooting this. :-(

If someone can suggest a fix, I can test it.

[ilg-ul]

Another question: are those large spaces between Setting, Modules and the list really necessary?

[ilg-ul]

I just checked and the issue can be also reproduced using an iPad simulator. Just be sure you select a 4th or 5th generation iPad (9.7", 2048x1536) and landscape screen orientation. Interestingly enough, on larger iPads I could not reproduce the issue.

[futurGH]

It's because certain iPads have the precise display dimensions (a computed width of 1024px) that would cause this edge case. My PR should resolve the top margin as well as the large spacing. Thanks for pointing it out.

[ilg-ul]

a computed width of 1024px

Does this also apply to a 9.7" screen with 2048x1536?

[futurGH]

Yeah. iOS devices, among others, have what's called a device pixel ratio. Although it has 2048 physical pixels across, that'd be illegible on a 9.7" display, so it presents browsers a width of 1024px and uses the pixels in between for stuff like finer font rendering; what Apple calls "retina".

[ilg-ul]

Thank you @futurGH for the explanation.

So, if you think that this fix also applies to my iPad, and there is no need to test anything now, I'll wait for the next release.