fullPage.js icon indicating copy to clipboard operation
fullPage.js copied to clipboard

Published 20 hours ago • verified publisher icon alvarotrigo

Viewport issue after rotating on iPhone X / 11

Open dczerwonski opened this issue 5 years ago • 11 comments

The height of Fullpage is wrong after device rotation on Safari on iPhone X / Xs / 11 and similiar

Link to isolated reproduction with no external CSS / JS

It appears to happen everywhere, even the demo: https://alvarotrigo.com/fullPage/

Steps to reproduce it

  1. Close all the tabs in Safari (it's not happening when there are other tabs open)
  2. Load the page in portait mode
  3. Rotate to landscape
  4. Rotate back to portrait

Versions

iOS / iPhone X,Xs,11, etc. Safari Real devices, Browserstack.

First load: image

After 2 rotates: image

dczerwonski avatar Dec 24 '19 14:12 dczerwonski

It appears to happen everywhere, even the demo: https://alvarotrigo.com/fullPage/

The demo page is using fullpage.js 3.0.7. (need to be updated)

Can you reproduce it in any other example such as the following using 3.0.8? https://alvarotrigo.com/fullPage/examples/navigationV.html

alvarotrigo avatar Dec 24 '19 16:12 alvarotrigo

I’m positive, it affects 3.0.8 too.

After load: 067A3749-CD88-4977-A717-6F723B288DCF

After rotations: 915D7955-9F73-4B51-9E54-0A9B4810E62D

dczerwonski avatar Dec 24 '19 20:12 dczerwonski

I'm not able to reproduce it on my iPhone 11 and neither in browserstack.com with real devices. I asume you are using Safari ?

Can you try from another iPhone? What's your model and what OS are you using? I assume it is a real device and not an emulator ?

alvarotrigo avatar Dec 25 '19 10:12 alvarotrigo

I've tested it on real iPhone Xs, iOS 13.3, Safari. Unfortunatelly I don't have access to any other iPhone at the moment, can do it in few days.

I noticed today that when testing on Browserstack it's happening on your demo site only sometimes and it seems to be random.

dczerwonski avatar Dec 25 '19 12:12 dczerwonski

I noticed today that when testing on Browserstack it's happening on your demo site only sometimes and it seems to be random.

Let's ignore the demo site for now, as it is using an older version of fullPage.js.

alvarotrigo avatar Dec 25 '19 13:12 alvarotrigo

Has this been fixed in 3.0.9? Could you check this out?

alvarotrigo avatar Jul 27 '20 10:07 alvarotrigo

@alvarotrigo not sure if this is on your radar but I can confirm this still happens on 3.1.0 with iphone 6s plus (chrome and safari ) and android (chrome) on the official site https://alvarotrigo.com/fullPage/

if page is loaded in portrait, it looks fine. But as its tiled into landscape the space/gap/viewport sizing issue appears. This happens when going from loading in landscape and tilting to portrait as well.

mr-moto avatar Apr 08 '21 05:04 mr-moto

@mr-moto thanks for the info! I'll check it out when I have some time.

Please feel free to provide a PR if you think you can tackle the issue. It might also be related with https://github.com/alvarotrigo/fullPage.js/issues/4072

alvarotrigo avatar Apr 08 '21 11:04 alvarotrigo

I also have this issue on my site hiding fullpage.js on an iPhone 6s, url: mysolarconnector.com

Has it been resolved yet?

solomonbarayev avatar Jun 01 '21 10:06 solomonbarayev

I also have this issue on my site hiding fullpage.js on an iPhone 6s, url: mysolarconnector.com

This issue is not about "hiding fullpage.js". It's about a problem when rotating the viewport.

alvarotrigo avatar Jun 01 '21 15:06 alvarotrigo

I also have this issue on my site hiding fullpage.js on an iPhone 6s, url: mysolarconnector.com

This issue is not about "hiding fullpage.js". It's about a problem when rotating the viewport.

Sorry that was an autocorrect on my device, I meant to write "using fullpage.js" not "hiding fullpage.js"

solomonbarayev avatar Jun 01 '21 16:06 solomonbarayev