Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

iOS 11.3: iNoBounce No Longer Works #45

Closed
Shugabuga opened this issue Jan 30, 2018 · 19 comments
Closed

iOS 11.3: iNoBounce No Longer Works #45

Shugabuga opened this issue Jan 30, 2018 · 19 comments

Comments

@Shugabuga
Copy link

  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.
  1. 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
  1. 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).
  1. Any workarounds you found
  • No workarounds have been found.
@lazd
Copy link
Owner

lazd commented Mar 16, 2018

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
Copy link
Contributor

95B commented Mar 24, 2018

There is no console output sadly

@95B
Copy link
Contributor

95B commented Mar 24, 2018

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
Copy link

icarito commented Mar 24, 2018

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

@95B
Copy link
Contributor

95B commented Mar 24, 2018

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

@icarito
Copy link

icarito commented Mar 24, 2018

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
Copy link

icarito commented Mar 24, 2018

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

@95B
Copy link
Contributor

95B commented Mar 24, 2018

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
Copy link
Author

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

@lazd
Copy link
Owner

lazd commented Mar 24, 2018

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
Copy link

terreng commented Mar 30, 2018

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
Copy link
Contributor

95B commented Mar 30, 2018 via email

@alexreardon
Copy link

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

@Sembiance
Copy link

Sembiance commented Apr 3, 2018

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
Copy link
Contributor

95B commented Apr 3, 2018 via email

@terreng
Copy link

terreng commented Apr 4, 2018

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

@95B
Copy link
Contributor

95B commented Apr 4, 2018

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

@95B 95B mentioned this issue Apr 4, 2018
@95B
Copy link
Contributor

95B commented Apr 4, 2018

Pull request made @lazd & @Sembiance #47

@lazd
Copy link
Owner

lazd commented Apr 9, 2018

Fix released in 0.1.6. Thanks everyone!

@lazd lazd closed this as completed Apr 9, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants