Safari seems to ignore VH as a rule on iPad

Design help General
1

Good morning all,

So I’ve been testing out my website in Safari on iPad (I can’t download any other browsers onto it right now, company restrictions.) and I’ve got my landing page’s 1st section to fill to the full viewport height of the browser.

However safari has this irritating feature where if you scroll down, the top bar shrinks away… yet this doesn’t seem to effect the VH height… It’s like it just tucks a little bit extra bit of it below until you scroll down.

This is a problem because I’ve now got elements on my page that align to the bottom of the 1st section not appearing on load until the user scrolls down.

I’ve tried aligning it to the top and padding it as far down as I can but because Webflow doesn’t have a separate display function for iPad Landscape (This a highly requested feature from 2 years ago… come on guys), the desktop version and ipad version position is totally differently no matter the measurement.

I’ve not had much luck so far, any clues?

Here is my site Read-Only: LINK

2

Hi,

Try setting the max-height and min-height attribute to 100vh.

3

That’s how Apple handles the viewport in mobile Safari, that’s very annoying. I’m not even sure there’s an easy and elegant solutions for that. I often stumble on this post who explains the situation and provides possible solutions.

1 Like
4

Cheers Vincent, it’s great that people talk about it.

I consider this a solution!

5

Can you let us know which one of the 3 solutions proposed you’ve attempted and what the outcome is?

6

I’ve tried all 3 by inserting into the custom code section of the page bracketed with tags and there wasn’t any change unfortunately.

It seemingly did nothing.

7

I achieved a viewport fit result using the following settings:

15

(Set the height to 100vh, because I use an interaction so it is set at 0vh).

Also add this to your <head>

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

8

This didn’t work for me either James I’m afraid. Safari browser on iPad still crops the lower portion of the section out.

How it should look:

41
415344×2958 1.53 MB

How it’s appearing on Tablet Safari Browser.

IMG_20190910_120852
IMG_20190910_1208524160×3120 3.03 MB

Sorry I can’t provide a screen capture from the iPad directly, company device is locked.