Fix 69: iOS 7 shifting focus points due to address bar showing

[wizardlyhel]

We found a way to fix the shifted focus points when it happened. We need to do focus and then blur on an input element. However, on iOS 7.x, the resize event does not fire when the address bar/footer shows or hides.

Reference: https://steveush.wordpress.com/2014/03/13/safari-on-ios7-address-and-bookmark-bars-fixed-position-bug/

We are thinking to attempt the solution above but only poll the window height while pinny is open. https://gist.github.com/scalvert/1498b1e8a4e5ca89df17

Status: Opened for visibility

Reviewers: @scalvert JIRA: https://github.com/mobify/pinny/issues/69

How to test drive this PR:

1. Use a device running iOS 7.0.x
2. grunt serve
3. Navigate to the examples
4. Partially scroll the page
5. Open a pinny
6. Tap the bottom ~50px to trigger the bottom status bar
7. Ensure pinny closes, and/or input fields have their cursor correctly positioned

[wizardlyhel]

@scalvert

I have uploaded what I have here. These codes obviously need some major clean up and be put in the right place. Let's figure out how we should approach from here.

Very interesting find here. We thought that we need to do a focus/blur trick so that the focus points will restore itself. However, the following line in the refresh function will do exactly what we need. window.scrollTo(document.body.scrollLeft, document.body.scrollTop);

[wizardlyhel]

Documenting what @scalvert and I discussed offline.

We are going to move the positionFix file out and make it into a plugin fix.

https://github.com/mobify/synthetic-resize

The only purpose of this plugin will be firing off custom event when the address bar shows/hides itself. Pinny will listen to these events and perform the required actions in order to fix the focus issue.

The reason why we are moving this file out as a plugin is because this is an issue that will happen to any position fixed elements on iOS 7.

[wizardlyhel]

@scalvert Please take a look and tell me what you think.

[scalvert]

@kpeatt could you possibly give this one a little look see?

[kpeatt]

Seems good to me.