search

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.26k stars 7.3k forks source link

scrollBar:true causes sections to scroll on orientation change #1767

Open dsiglin opened 8 years ago

dsiglin commented 8 years ago

Version: 2.7.6

This is a question for anyone who might know why the following is happening. So when viewing a site I'm building (davidsiglinphotography.com) on mobile (IOS & Android) - if I change the phone orientation a few times the site will reorient down a section. Sometimes it will reorient and be at the bottom section. So, looking at section 2, I rotate between portrait and landscape a few times and end up in section 3.

Any idea why this is happening? On a normal site this wouldn't be a big deal since rotating the device wouldn't happen much. However on the site I'm building the phone is rotated to depending on a landscape or portrait photo.

I tried to recreate the problem with the fullpage.js test site but I can't make it misbehave so this is most likely a problem I introduced somehow. Just curious if anyone knows how I can fix it. Thanks.

Site configuration fwiw: scrollingSpeed: 700, fitToSection: true, css3: true, fitToSectionDelay: 1000, scrollBar: true, autoScrolling: true, touchSensitivity: 7, controlArrows: true, recordHistory: true, keyboardScrolling: true, animateAnchor: false, sectionSelector: '.section', slideSelector: '.slide', slidesNavigation: true, slidesNavPosition: 'bottom', sectionsColor : ['#1c1c1c', '#1c1c1c', '#1c1c1c', '#1c1c1c', '#1c1c1c', '#1c1c1c',], verticalCentered: false, anchors:['Home', 'Lifestyle', 'Street', 'Travel', 'Projects', 'Connect',], menu: '#mymenu',

alvarotrigo commented 8 years ago

Try to reproduce your issue in an isolated environment (no external CSS or JS) to see if the problem is in fullpage.js or not. Use the same settings for the initialisation as you are using.

If you are not able to reproduce it, I'll close the issue as this forum is just to treat fullpage.js issues.

dsiglin commented 8 years ago

Ok I put up a new index.html on that site that only uses fullpage.js javascript and css and only calls the jquery.min.js library. Go to that site on mobile in portrait orientation, scroll down to section 2 (titled "slide2a") and rotate to landscape orientation. If it doesn't happen right away, repeat a few times. For me on iPhone 6 it happens the first rotation. It will jump down to "slide5a"

alvarotrigo commented 8 years ago

Ok. Try using fitToSection: false. It doesn't make sense to use it when you don't have scroll bar. Let me know if that fixes your issue.

dsiglin commented 8 years ago

I do have scrollbar set to true. So, I set both scrollbar and fitToSection to false and it appears the problem has been solved. FYI - setting scrollbar to true and fitToSection to false will give a similar problem to what I described in my opening post. So what's going on that makes it do that?

Thanks for your help. I'll definitely be donating so you can keep up the good work.

alvarotrigo commented 8 years ago

I do have scrollbar set to true.

Right :D As it is not visible on the iPhone I didn't realise!

setting scrollbar to true and fitToSection to false will give a similar problem to what I described in my opening post

Similar? Or exactly the same one?

alvarotrigo commented 8 years ago

Your original issue can be reproduced in the scrollBar.html example oneline which uses fitToSection:true as well.

I'll mark it as a bug in any case.

alvarotrigo commented 8 years ago

Similar? Or exactly the same one?

I'll answer myself. I've tried it and the problem is basically the same, the only difference is that it doesn't auto fit to the section.

dsiglin commented 8 years ago

For me the difference was it moved up one section whereas in the original post the screen always moved down a section or three.

priyankamotiani commented 7 years ago

Hey,

Any update on this bug? Facing similar issue, need to keep scrollBar: true and fitToSection:true.

alvarotrigo commented 7 years ago

Nop.

blackthorn87 commented 6 years ago

Has anyone managed to solve this as it's causing an issue with a project and the guy want's fitToSection set to true?

blackthorn87 commented 6 years ago

Even though you closed my issue, I've set the properties you've mentioned and I still get the same problem, can any body help?

alvarotrigo commented 6 years ago

@blackthorn87 I don't get that problem on the demo page and it is using the options I told you to use. scrollBar:false and autoScrolling:true

versionmj commented 4 years ago

I am having a similar issue. Has anyone found a solution?