iOS 8.1 Mobile Auto Scrolling Off

[rajenms]

Hi, great plugin, thanks for all your work on it.

I've noticed that ever since I've upgraded to iOS 8.1, there are still remnants of auto scrolling on the actual iPhone device when scrolling through the page. For instance, try the following steps:

1. Go to your demo page - http://alvarotrigo.com/fullPage - on iPhone/Safari
2. Open up web inspector
3. Turn auto scrolling off... $.fn.fullpage.setAutoScrolling(false)
4. Scroll up and down

You should notice that the page jumps around as you scroll, when you really should expect the page to scroll smoothly.

I'm going to investigate this in the source code, but I was wondering if you can look to and if you had any ideas off the top of your head.

Thanks!

[alvarotrigo]

Could you please confirm it happens the same with this example I've just made?

Click on true or false to set those values for the autoScrolling property.

[rajenms]

Yes it happens whenever I click on false and try to scroll. If I click back
on true then it goes back to cleanly auto scrolling between sections.

On Monday, October 27, 2014, alvarotrigo notifications@github.com wrote:

Could you please confirm it happens the same with this example
http://alvarotrigo.com/fullPage/setAuto.html I've just made?

—
Reply to this email directly or view it on GitHub
#799 (comment)
.

Best,
Rajen Shah
909.560.2736

[alvarotrigo]

I don't have iOS 8.1 yet in my Phone, but I'll try to take a look at it whenever I can.
If you can record some video meanwhile, that'd help.

[rajenms]

Thanks for responding so quickly! I don't know how to video record my iPhone screen at the moment, but will submit a video as soon as I figure it out.

In the meantime, it seems that the culprit is in the setAutoScrolling function (line 117) in jquery.fullPage.js:

$('html, body').scrollTop(element.position().top);

My understanding is the the reason for the this line of code is to restore the user to the top of the active section where they were right before setAutoScrolling(false) was called. This makes sense to me. But for some reason in iOS 8.1, it seems that if you call setAutoScrolling(false) once, then it will continue to be called every so often while you are scrolling, thereby making your screen jump around while you scroll. I haven't figured out why this is happening yet. I've temporarily commented out that line, which resolves my issue for iOS 8.1. I will keep you posted in case I find a solution.

[alvarotrigo]

Are you using the latest version of fullPage.js? (and of the CSS file?) (2.4.3)

In case you aren't, please download the latest one and try it again.

In case you are. Try going back to the previous version ( 2.4.2 for the JS file, and 2.1.9 for the CSS file).
You can find all those old version in the history of those files in github:

• For the jQuery file
• For the CSS file.

Then let me know if you keep having the problem.

[alvarotrigo]

Any update with this issue? Did you solve it?
Could you answer me to the questions I asked in the previous post?

[alvarotrigo]

Ok, I detected the problem. It is happening because the address bar in the top changes its size when scrolling up or down and the resize event is fired, causing the plugin to try to readjust and fit the sections in the screen. (as you can see in the demo page by resizing the window)

It seems iOS 8 was not acting in the same way, it was probably not firing the resize event.

I'll try to think about how to deal with it...

[alvarotrigo]

Meanwhile I would suggest you to destroy the plugin with destroy() instead of calling setAutoScrolling(false)

[malydok]

I've stumbled upon the same issue just today and have fixed it by disabling the vertical resize event for mobile devices.

Here's the part I tweaked:

var resizeId;
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

//when resizing the site, we adjust the heights of the sections, slimScroll...
$(window).resize(function() {
    var newWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;

    // disable vertical resize for mobile
    if(width > 1024 || width !== newWidth) {
        // rebuild immediately on touch devices
        if (isTouchDevice) {
            $.fn.fullpage.reBuild();
        }else{
            //in order to call the functions only when the resize is finished
            //http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing
            clearTimeout(resizeId);

            resizeId = setTimeout($.fn.fullpage.reBuild, 500);
        }
        width = newWidth;
    }
});

What I do here is check if the width changed on resize and if it didn't then it means a vertical resize happened (the address bar height changed). 1024px width is the limit of my choice to let desktops have the default behaviour.

This is a quick fix and probably needs looking into/refining.

[alvarotrigo]

I'm not quite sure if that would work in other device mobile OS such as Android, Windows Phone...
Some of these phones have they width and height inverted as far as I know.

That'd would need a bit more of testing.

[malydok]

Tested in Android browser on HTC One X and a Samsung tablet, Safari on iPad and iPhone 4.

I guess this Stack question is relevant here:
http://stackoverflow.com/questions/6850164/get-the-device-width-in-javascript

[alvarotrigo]

@malydok right. It seems the values get updated after the resize event but not always after the orientationchange. That was my previous problem.

In any case, I see you are doing some funny things in there, such as using the value of 1024:

 if(width > 1024 || width !== newWidth) {

I think the solution is more simple. Just prevent calling the reBuild method when resizing if the autoScrollilng is turned off and its not changing orientation.

[alvarotrigo]

@malydok I'm seeing that the value of newWidth is exactly the same as width even when rotating the iPhone. Using iOS 8.1 and Safari. (i'm always getting 980 in iPhone 5)

It might be because of the lack of this meta tag value as pointed out here.

<meta name="viewport" content="width=device-width; initial-scale=1.0;">

[malydok]

@alvarotrigo That seems to be the case - viewport meta on my website matches the one you quoted.

On the other hand initial-scale causes a "zoom bug" on iOS < 6 (fix: https://github.com/sergiolopes/ios-zoom-bug-fix) but I think it can be neglected at this point as it's an old issue.

[alvarotrigo]

I would like to find a solution which doesn't require to modify the HTML markup with any meta tag, as many people will not include it.

[malydok]

This viewport meta is the most common one on responsive websites and in frameworks (h5bp, foundation, bootstrap, etc.) so most people already have it even if they don't really pay attention to it. I understand your concerns though and will try to help you look for a solution in my spare time.

[alvarotrigo]

I've noticed the height value does change. Not sure if this will work in the same way for Android or other OS, but this could be an easy solution .
If the change of it is not too big, then we can assume the browser is hiding the address bar or similar, otherwise, if it is big enough, the device was rotated.

It doesn't sound like the perfect solution, as this might change in a future for other OS or an update of the browser and it sounds a bit weird only the height value is updated, but is something that would solve the problem temporary.

[malydok]

That's actually what I did, although differently - by checking the width of the viewport. If the width didn't change on resize then obviously height did. Checking the size of resize is something I didn't include because it requires coming up with a magic number for the "not too big" part and it needs some testing.

And still you have to detect the viewport height somehow. Does it work without initial-scale: 1 on orientation change? I presume it's the exact same problem we discussed earlier.

[alvarotrigo]

That's actually what I did, although differently - by checking the width of the viewport.

The thing is that the height changes even when not including the meta tag, which doesn't happen with the width. (at least on iPhone OS)
About the not to big, percentages could be used.

[malydok]

Alrighty! Sounds good then.

[ffiona]

Is there any solution for this bug yet? The fix by @malydok didn't work for me. And I'm not too JS-smart to figure it out by myself.

I have two slides and the the normal text. And I can't scroll to it at all. It just stuck at the second slide and keeps scrolling back to it. The bug is only in iOS Safari and Android. Everything is fine in iOS Chrome.

[alvarotrigo]

@ffiona nop, we are thinking yet how to deal with it. Are you using autoScrolling:false then?

[ffiona]

@alvarotrigo I'm using autoScrolling:false for both desktop and mobile versions.

[alvarotrigo]

@ffiona right, ok. I'll let you know when we find a proper way to deal with this bug.

[ffiona]

@alvarotrigo Thanks!

[malydok]

@ffiona Is your website's viewport meta set as mentioned above?

[ffiona]

@malydok My viewport is the following:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

[malydok]

@ffiona Could you try my code with exactly:

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

If this fails to work then I'm truly stumped.

[ffiona]

@malydok I tried, but unfortunately with no success. Scroll down is okay, but scroll up is almost impossible in my case.

[bkapke]

Steps to reproduce:

1. Reduce screen size (or test on an iOS device) to less than the responsive threshold.
2. Scroll freely to the middle of a section (all fine and dandy).
3. Resize the window slightly and the current section is scrolled to the top of the page. this essentially
   takes scrolling hostage until the animation has completed.

I have been stepping through the JS trying to determine what causes the section to scroll to the top on resize but it is eluding me. Destroying the object will cause problems with navigation so I don't want to do that, I simply want to prevent the scroll(jump) to the top of the section on resize. Can anyone point me to that method? Maybe it's not a simple answer? Thanks in advance, if I find something I will share it asap.

[alvarotrigo]

Can anyone point me to that method? Maybe it's not a simple answer?

If you read all the topic you will see I already figured out what's the cause of it:

Ok, I detected the problem. It is happening because the address bar in the top changes its size when scrolling up or down and the resize event is fired, causing the plugin to try to readjust and fit the sections in the screen. (as you can see in the demo page by resizing the window)

It seems iOS 8 was not acting in the same way, it was probably not firing the resize event.

I'll try to think about how to deal with it...

[alvarotrigo]

@ffiona @malydok @rajenms please download the lateste version 2.4.7 and let me know if it is fixed for you guys.

I've tested it in iOS8.1 on iPhone 5 and it seems to be working properly.

[malydok]

Works for me.

[alvarotrigo]

@malydok have you tested it in android?

[malydok]

Works as expected - nothing was broken on my devices.

[alvarotrigo]

Cool, then I'll close the topic if there's no objections.

[ffiona]

Tested it in andoroid and in ios, everything works. Thank you @alvarotrigo !

[maciejtatol]

Tags: iOS, height, fix, problem

Sometimes when I use fullpage.js on iOS devices there is problem with height adjust (height of section is sometimes caluculated 10 times bigger than it is). My solution for this is to use this function:

function getWindowHeight(){
  return window.innerHeight ? window.innerHeight : $(window).height();
}

inside afterRender and afterResize event like that

...
    afterRender: function(){
      $(".section").height(getWindowHeight());
    },
    afterResize: function(){
      $(".section").height(getWindowHeight());
    }
...

and add CSS style

#fullpage{
height: auto !important
}

This solves problem with random section height on iPads and iPhones. I suggest use this solution to retrieve height on jquery.fullPage.js:462(v 2.6.9)

[rohanchambers]

Hello Alvaro.
Like everyone has said before, amazing plugin. Thank you so much.
I am having the issue that everyone has mentioned above but with iOS10. Sorry, wasn't sure if I should have raised a new issue.
So on mobile when I scroll up a little it jumps to the top, most likely because of the the address bar in the top changes its size like you mentioned. Below is what I use to initialise fullpage.
I was wondering if you had come across this and if there was a fix for it?
I am using an iPhone 6s with Safari in portrait mode.
Many thanks

    $('#fullpage').fullpage({
    	anchors:['section-intro', 'section-about-us', 'section-investments', 'section-past-projects', 'section-team', 'section-bafta-support'],
		navigation: true,
		navigationPosition: 'right',
		navigationTooltips: ['Intro', 'About us', 'Investments', 'Past Projects', 'Team', 'BAFTA Support'],
		scrollingSpeed: 1000,
		scrollBar: true,
		keyboardScrolling: true,
		responsiveWidth: 600,
		css3: false,
		lazyLoading: false,
		autoScrolling: true,

		onLeave: function(anchorLink, index){
			var videos = $('video');
			videos.get(0).pause();
		  	videos.currentTime = 0;
		},

		afterLoad: function(anchorLink, index){
			var videos = $('video');
			videos.load();			
		}
    });

[alvarotrigo]

@rohanchambers I'm not able to reproduce it in the scrollBar demo.
Please add a link to an isolated reproduction or a video of the issue ideally.

[rohanchambers]

Hi Alvaro, I can’t replicate the bug on the scrollbar demo. However the issue occurs when responsiveWidth: 600 If you could have a look at this link and try and scroll up it just jumps straight to the top. Many thanks for your support Rohan

…

On 14 Feb 2017, at 11:39, Álvaro ***@***.***> wrote: @rohanchambers <https://github.com/rohanchambers> I'm not able to reproduce it in the scrollBar demo <http://alvarotrigo.com/fullPage/examples/scrollBar.html>. Please add a link or a video of the issue ideally. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#799 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABq7t1EDQ0Gq8356mitYC206PstddZzLks5rcYR8gaJpZM4CzKoE>.

[alvarotrigo]

@rohanchambers you'll have to provide an isolated reproduction with no external CSS or JS so I can check it to make sure the problem is in fullPage.js and not in your side.

[rohanchambers]

Sorry to get back so late. I did an isolated version like you said and the issue didn't occur. I narrowed it down and the culprit was using the skrollr plugin when using fullpage.
Thanks again for responding so quickly and for creating a kick ass plugin!

Just in case anyone runs in to the same problem, on resize() I was using the skrollr.init().destroy() function to remove skrollr below the width of 768 and if it was a mobile. However by doing this it caused the issue in question of jumping to the top of the window on mobile when swiping up.
I lost some functionality when resizing on desktop browsers but that's ok. Below is roughly what I had / changed to get it to work properly.

Issue code
$(window).resize(function() { // Initialize skrollr if the window width is higher than 768px wide else destroy skrollr if ($(window).width() < tabletWidth || isMobile() ) { skrollr.init().destroy(); } else { skrollr.init({ forceHeight: false }); } }; });

Solved with
$(window).resize(function() { if( windowWidth >= tabletWidth ) { skrollr.init({ forceHeight: false }); } }; });