Initial load of this plugin inside FB / IG browser miscalculates page height, renders incorrectly - Githubissues

alvarotrigo / fullPage.js

fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

http://alvarotrigo.com/fullPage/

GNU General Public License v3.0

35.3k stars 7.29k forks source link

Initial load of this plugin inside FB / IG browser miscalculates page height, renders incorrectly #3675

Open juxton opened 5 years ago

juxton commented 5 years ago

See here, with the official plugin page. You can reproduce this error by launching https://alvarotrigo.com/react-fullpage from within Facebook, for example. After the initial load (closing the in-app browser and opening it again) - rendering works correctly. This appears to be the case with both Facebook and Instagram in-app browsers. Both initially load with broken layout.

alvarotrigo commented 5 years ago

I'll give it a try tomorrow! Thanks for reporting it!

juxton commented 5 years ago

I'm curious if you've had a look or if there's anything I can do to help debug? We launched with this last week, and I've been tasked with getting this resolved ASAP or I need to abandon this plugin and find another. Here's our implementation:

https://welco.me/

alvarotrigo commented 5 years ago

I didn't have the time to look at it yet. Hopefully I'll manage to do tomorrow or at least this week.

alvarotrigo commented 5 years ago

If you are really in a rush, consider upgrading to the Organisation license to get premium support.

alvarotrigo commented 5 years ago

I've taken a look into the issue but I can't reproduce it with your current site (welco.me).

I can however reproduce it the fullpage.js demo site or any other like the continousVertical example which is not using the dragAndMove extension.

I've manage to solve the viewport issue (fix not yet released), but it seems there's another issue. It is flickering while scrolling up and down and showing some white parts in both the top or the bottom of the viewport depending on the direction of the scroll.

@juxton did you do anything to avoid those? I can't seem to see that flickering in your site.

alvarotrigo commented 5 years ago

I've commited the fix on the dev branch on the unminified file.

I'll probably adopt a better solution for in in future versions. Seems like dealing with pixels can bee tricky and perhaps dealing with percentages can be a better solution overall.

juxton commented 5 years ago

@alvarotrigo I've tried a few things on my end - trying to set various heights explicitly to see if that helped, and I haven't been able to come up with a reliable solution. As well, debugging in FB and IG browsers seems to be particularly difficult. FB browser supports clear cache operations ... but even then it's not obvious that it's fully clearing the cache. IG browser - I haven't figured out how to clear that cache.

From my point of view, it appears to be some kind of race condition - because once the page is in local memory, the problem no longer appears. I've considered doing local browser detect to sniff FB/IG ... and then delay initialization of fullPage after some timeout ... but I haven't tried that yet.

alvarotrigo commented 5 years ago

Well, at least we have a solution regarding the height now. It has been fixed on the dev branch.

What is left in my end is trying to solve the flickering, which apparently doesn't take place in your site for some reason.

juxton commented 5 years ago

I'm a little unclear how to include your dev branch changes here from within react-fullpage. Could you provide any instructions for that?

alvarotrigo commented 5 years ago

@juxton ah yeah, that's a bit more tricky. You can wait until I release the next version next week, but if you are in a rush, you can edit the dist file within your node_modules react-fullpage module and look for "fullPage 3.0.5 - Extensions 0.1.8".

If you are using the UMD version, then use that file instead.

Then replace all the fullpage.js code for the new version in the dev branch.

alvarotrigo commented 5 years ago

Merged into fullpage.js 3.0.6 which is now available! ⚡️ ⚡️

alvarotrigo commented 4 years ago

I open the issue again as it seems some people still having issues with it. Way to reproduce it:

Open https://alvarotrigo.com/fullPage/examples/navigationV.html in Instagram

dropthespark commented 4 years ago

Any news on this?

alvarotrigo commented 4 years ago

Nope.

justinmetros commented 2 years ago

Has anyone found a workaround for this since the last comment 2 years ago?

alvarotrigo commented 2 years ago

@justinmetros have you tried fullpage.js version 4.0.5? Give it a try and let me know if that fixes it for you.

vitaliikaplia commented 2 years ago

Has anyone found a workaround for this since the last comment 2 years ago?

'scrollBar: false' helps me with this issue @justinmetros

justinmetros commented 2 years ago

@justinmetros have you tried fullpage.js version 4.0.5? Give it a try and let me know if that fixes it for you.

@alvarotrigo thanks for responding. react-fullpage is still using v3.1.2. Specifically we are using the dev branch because a typescript issue has been fixed there.

Wondering what is required to get this updated so we can test the fix. We built a landing page around fullpage and we're unable to post links to IG/TikTok because of this render issue. Have purchased the business commercial license prior to use, so if better to contact support via email can do that as well. Much appreciated, thank you! 🙏

alvarotrigo commented 2 years ago

Wondering what is required to get this updated so we can test the fix.

Not sure yet as I haven't gotten my hands around it yet.

Basically, you'll have to replace the fullPage.js dependency for the new version, but there might be side effects or extra changes to do on the react wrapper. So I can't really help you here yet.

It should be ready in a week or two.