Rotating iPhone Safari causes bottom of pano to cut off.

Q&A about the latest versions
Post Reply
MCelia
Posts: 4
Joined: Thu May 04, 2017 12:30 pm

Having a hard time figuring this one out. When I rotate my iOS device using Safari from portrait to landscape, the bottom footer I have defined in my skin seems to be cut off. Rotating several times changes how much is being cut off. If I double tap to get to full screen mode, it's fine, but I don't want people to have to do that.

How can I fix this?

Here is the site: http://www.lightsailvr.com/princesscrui ... _final_v2/
Wowart
Posts: 5
Joined: Mon Jan 19, 2015 12:13 pm

I had a similar problem today, after rotating I ended up with a white band at the bottom of the screen in portrait and this only if iPhone and Safari as browser, on the iPad in Safari it doesn't happen. Neither on the Iphone if I used another browser like Chrome.

In the html file I tried replacing % for vh and that seems to solve it.

so height:100% becomes height:100vh
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

@MCelia
The weblink is not working for me.

To all
Has anyone got a link to test with?
Is this an issue when viewed in WordPress or a standard website?
I have an iPhone 11 pro and not seeing this in Safari, testing with a link to a tour, and using my test WordPress website.
Regards,
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Wowart
Posts: 5
Joined: Mon Jan 19, 2015 12:13 pm

Url with 100% as height: https://wowart.be/lexus-zaventem/

Url with 100vh as height: https://wowart.be/fodfin-preview/

See image for illustration. Normal website, latest IOS and Safari.

Image
Andy360south
Posts: 8
Joined: Thu Oct 08, 2020 11:54 am

http://360backroom.360southclients.net:8080/ios (not the full tour, but a quick demo with 1 rectangle as placeholder for a button)

I'm having this same issue and tried the 100vh in height

/* fullscreen */
html {
height:100vh;
}
body {
height:100vh;


and for safari that worked to a certain extent (when you start the tour in portrait, there's still a browser bar at the bottom covering a navigation button)

However, this then breaks the tour in Chrome on iOS and Android. (button is positioned half off the bottom of the screen...)

Desperately need a solution to this, because at the moment my client will not accept that this is essentially broken on apple, it's making what is otherwise an awesome piece of software in pano2vr redundant for our business.
Andy360south
Posts: 8
Joined: Thu Oct 08, 2020 11:54 am

Wowart wrote: Tue Oct 20, 2020 12:42 pm Url with 100% as height: https://wowart.be/lexus-zaventem/

Url with 100vh as height: https://wowart.be/fodfin-preview/

See image for illustration. Normal website, latest IOS and Safari.

Image
But this breaks on chrome (iOS and Android) Did you find a way of making work across multiple browsers?

Andy.
Neal
Posts: 193
Joined: Thu Dec 12, 2013 11:14 am
Contact:

Try making this change to the viewport meta tag. I think it will work, but I'm not 100% sure. I added height=device-height. That should report the current height for use with the CSS.

Code: Select all

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
Let us know if that works
Post Reply