iOS 11.3: iNoBounce No Longer Works

[Shugabuga]

1. Specific steps you took to reproduce the problem

Steps:

• Go to http://blog.lazd.net/iNoBounce (the demo page) on iOS 11.3 (beta)
• Swipe up and down on the page, especially on static elements like the navbar,
• The entire page is swiped just as if iNoBounce was not there.

Expected:

• It should not scroll, but it does.

3. The behavior you observed (do not simply write "not working")

Observed:

• Swiping on stationary elements (such as navbars) on iOS 11.3 always will move the entire page.
• Swiping up towards the top of a scrollable div will move the entire page.

Device:

• iPhone 7, iOS 11.3

5. Additional information

• It works on the demo page and all examples of it, as well as Framework7-powered applications with iNoBounce implemented (which works on other iOS versions).

6. Any workarounds you found

• No workarounds have been found.

[lazd]

I still don't have access to 11.3 to test, but it does work on iOS 11.2.6.

Can anyone check, using remote debugger, if there is console output?

[95B]

There is no console output sadly

[95B]

My best guess is that this would be due to the changes in iOS 11.3 that effect the viewport to help with iPhone X styling. I have made the code output everything it is doing and it seems to be "working" according to plan on the backend however we still see it bounce.

[icarito]

I think I succeeded in not getting my app to bounce, try https://educa.juegos/

[95B]

@icarito yes! You got it to work as expected! Would you mind sharing how you did it?

[icarito]

I tried a lot of stuff - I think the trick was to make html, and body have height: 100%, overflow: hidden; and position: fixed;.

[icarito]

https://github.com/somosazucar/Jappy/blame/master/css/activity.css

[95B]

That was exactly the problem! I will write up a piece of code that will be attached to iNoBounce to attempt to fix this without user input!

[Shugabuga]

@icarito's solution seems to fix the issue for me too.

[lazd]

Sounds like it's a CSS fix... Which we could apply in JavaScript conditionally based on the user agent, but could cause issues if people aren't expecting it... Should this be a footnote in the readme, or should it be code?

[terreng]

The CSS fix here doesn't work very well if you try it out. The bounce actually still happens, you just can't see it. When you try to scroll past the top, and then immediately try to scroll down, you can't because you are still scrolling the entire page instead of just the container. It's a little difficult to explain but this makes for unexpected scrolling behaviour.

[95B]

Yes, I've noticed that you also get a little 20px bar at the bottom of the screen for no apparent reason. At least on my end.

…

On Sat, 31 Mar 2018 at 2:35 am, Terren ***@***.***> wrote: The CSS fix here doesn't work very well if you try it out. The bounce actually still happens, you just can't see it. When you try to scroll past the top, and then immediately try to scroll down, you can't because you are still scrolling the entire page instead of just the container. It's a little difficult to explain but this makes for unexpected scrolling behaviour. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#45 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Aj5diVkNDSYk3DJCNw_19wq3OE20AAqqks5tjlDbgaJpZM4RxqlD> .

[alexreardon]

This could be related to a webkit issue that we found as a part of atlassian/react-beautiful-dnd#413

[Sembiance]

Changing in inobounce.js:

window.addEventListener('touchstart', handleTouchstart, false);
window.addEventListener('touchmove', handleTouchmove, false);

to

window.addEventListener('touchstart', handleTouchstart, { passive : false });
window.addEventListener('touchmove', handleTouchmove, { passive : false });

Fixed the problem for me.

That isn't supported in some browsers, so you need to check for it first.

I've borrowed the check from Modernizr.passiveeventlisteners and have this at the top of inobounce.js:

var supportsPassiveOption = false;
    try {
      var opts = Object.defineProperty({}, 'passive', {
        get: function() {
          supportsPassiveOption = true;
        }
      });
      window.addEventListener('test', null, opts);
    } catch (e) {}

And then later have:

window.addEventListener('touchstart', handleTouchstart, supportsPassiveOption ? { passive : false } : false);
window.addEventListener('touchmove', handleTouchmove, supportsPassiveOption ? { passive : false } : false);

[95B]

I feel we could probably add a check hardcoded so developers don't have to use an external framework, they can just drop in. Otherwise, amazing job on this fix!

…

On Wed, 4 Apr 2018 at 1:57 am, Robert Schultz ***@***.***> wrote: Changing: window.addEventListener('touchstart', handleTouchstart, false); window.addEventListener('touchmove', handleTouchmove, false); to window.addEventListener('touchstart', handleTouchstart, { passive : false }); window.addEventListener('touchmove', handleTouchmove, { passive : false }); Fixed the problem for me. I didn't submit a pull request because that isn't supported in some browsers, so I'm actually doing a check like this Modernizr.passiveeventlisteners ? { passive : false } : false — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#45 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Aj5diRc7GWL8NVN4sN4zftAnbxFfPdhtks5tk5vQgaJpZM4RxqlD> .

[terreng]

@Sembiance I can confirm that this fixed the issue, thank you so much!

[95B]

I can confirm this works in iOS 11.3 and iOS 11.4 Beta 1!

[95B]

Pull request made @lazd & @Sembiance #47

[lazd]

Fix released in 0.1.6. Thanks everyone!