All actionable elements focus points get shifted when address bar shows up while Pinny is open

wizardlyhel commented 9 years ago

Steps to reproduce:

Scroll so that the url address bar is in it's minimum state
Open a pinny (Doesn't matter what type)
Attempt to hit the area at the bottom of the screen (around 50-100px range), this will bring up the url address bar
Attempt to interact with pinny

Result: All actionable element focus points of the pinny are shifted. This becomes a major issue if there is a fixed footer in Pinny where the url address bar hides the footer.

This can be very easily reproduced on iOS 7.x and below.

pinnyaddressbar

wizardlyhel commented 9 years ago

The problem here is that there is no way with javascript to know when the state of the address bar changed. Resize event is not fired when the address bar changes from maximum to minimum state and vice versa.

Possible Solutions

Solution 1 Use the minimal-ui viewport property to keep the address bar in minimum state unless user taps on the address bar manually.

(Rejected by @jeffkamo and @ry5n ) We should not be changing the default behaviour of the browser as it will confuse users

Solution 2 While pinny is open, keep firing window.scrollTo(0,1). http://24ways.org/2011/raising-the-bar-on-mobile/ OR fire window.scrollTo(0,1) whenever there is an interaction within pinny.

(Rejected) Shooting myself for even mentioning this solution. This solution will conflict with the input jump fix solution that we have in the current build.

We will need to have a more generalized solution for this issue, says @scalvert