Dear community
I have been trying to make my fullpagejs work on mobile for days now.
I tried to follow this tutorial:
https://webflow.com/website/fullpage-js-interactions
And I feel like I did everything the same way.
By emulating a phone with the inspector tool, I found a difference between my site and the teamplate site:
Is anyone able to spot the mistake I have made? That would be a huge help!
it looks fine to me from my actual Mobile (iPhone 11) i’ve noticed sometimes the emulator isn’t always the most accurate
Thanks for the answer @lol_no !
Yes it also works well on my iPhone X. I identified the problem on an android device.
I also gathered more information in the meantime.
The window.innerHeight variable seems to be off for me, but only on my website.
My sections seem to be taking up the window.innerHeight height.
The clonable you link (fullpage-js-interactions - Webflow) is using a very old version of fullPage.js (2.9.7) and the current version is 3.0.9.
I would recommend you to update and try again.
after updating, the issue still persists.
The issue seems to only happen in chrome browser when emulating phones. (also in the edge browser and on real mobile phones using chrome)
Here is another screenshot with the new version in google chrome:
Topic continued on the fullpage.js forum:
So the problem was due to positioning elements absolutely within a section.
When doing this and using FullPageJS, you should always set the overflow property to:
overflow: hidden;
Or esle these absolute elements might mess up your section heights.
