search

angular / material

Material design for AngularJS
https://material.angularjs.org/
MIT License
16.55k stars 3.39k forks source link

content: on ipad doesn't scroll below the virtual keyboard #7632

Closed kwypchlo closed 6 years ago

kwypchlo commented 8 years ago

Hello,

There is an issue that prevents ipad/iphone users to scroll down to the bottom of the page when virtaul keyboard is open. This code snippet below in md-content directive makes browser never touch top and bottom of the page to prevent the bouncing effect on ipad/iphone.

if (node.scrollTop === 0) {
  node.scrollTop = 1;
} else if (node.scrollHeight === node.scrollTop + node.offsetHeight) {
  node.scrollTop -= 1;
}

Steps to reproduce:

  1. As a reference use this site: https://material.angularjs.org/latest/demo/input
  2. focus on an input that is at least 'keyboard height in pixels' from the bottom of the page , as an example use Name field in Errors Advanced section.
  3. virtual keyboards slides up from the bottom
  4. try to scroll down to the bottom of the page and you will notice you are stopped at some height and cannot go below - some content is not available.

My guess is, because it works when you comment out node.scrollTop -= 1;, browser detects if user scrolled down to the bottom of the page and scrolls below because it detects the keyboard. Since we never achieve bottom of the page because md-content bounces us back, we cannot go below the keyboard.

By the way, there is workaround for that - you can use arrows to tab to next field and the page scrolls fine or you can position the page in a way that the input you will click would appear below the virtual keyboard so you are automatically scrolled a bit when the keyboard slides up and then it all works fine.

This is extremely high priority for me, please consider some action. I alone didn't think of any good workaround for that but I can help with pull request if anyone points me in the correct direction.

kwypchlo commented 8 years ago

@ThomasBurleson any love for my issue? pretty please :cake:

skoszuta commented 8 years ago

+1

wowczarczyk commented 8 years ago

Same here, +1

topherfangio commented 8 years ago

@kwypchlo I spent some time working on this last week and have come to the following conclusions:

  1. This appears to have no connection with the code above because if I remove/comment it out, you still can't scroll to the bottom
  2. I can't actually tell a difference in anything when adding/removing this code
  3. With or without that code, things seems to work as expected if you scroll the <md-content> to the bottom, wait until the scrolling settles (i.e. the scrollbars disappear) and then scroll down again; this seems to let Safari know that you've reached the bottom of the page and scroll the page body so that you can see the content under the keyboard
  4. As far as I can tell, there is absolutely NO way to know if the keyboard is visible on mobile Safari (you also can't rely on input focus because someone might be using an external keyboard)

So I'm not sure if there is anything we can do to "fix" this. The only real "fix" I know of is to fill the body with your content and let the browser handle the scrolling for you. Obviously, this isn't ideal for many situations.

The only other thing I can think of is to disable browser scrolling altogether (overflow: hidden) and attempt to handle it manually in pure JS (you can still set scrollTop, top or maybe even a CSS transition). This way, we could potentially watch the momentum scrolling, and if they hit the top, transition the remaining momentum into the parent scrollable (a parent <md-content> or perhaps the <body>). But this sounds like a lot of work. If I recall correctly, though, this is the final approach that SproutCore settled on after many, many attempts to get their ScrollView right.

@kwypchlo Are my above conclusions correct as far as you know? You mentioned that it worked when you removed the code, but that's not what I found.

@ThomasBurleson Any thoughts on my potential solution above of the manual scrolling approach?

kwypchlo commented 8 years ago

Thanks for the response. Let me look at this again and I will come back with a reply :)

Splaktar commented 6 years ago

Closing this as it is assumed to be working since feedback to the above investigation was not provided.