Pinny gets distorted when the soft keyboard is shown after orientation

[wizardlyhel]

Steps to reproduce:

1. Open pinny
2. Focus on an input so that soft keyboard pops up
3. Change orientation

Result: You will have a pinny that is shifted and it will revert itself after soft keyboard is dismissed

This is happening on iOS 7.x

[wizardlyhel]

Investigated by @hcstephencheung

I've investigated into this issue a little bit, and here's a summary of what I found so far (and questions after that).

Situation:

• iOS 7 ignores viewport updates on position fixed elements when keyboard is up
• focusing on input elements brings the keyboard up
• lockup, shade, pinny plugins are all position fixed

References:

• Bootstrap (front-end framework) had this issue with their modals (https://github.com/twbs/bootstrap/issues/9023).
• Solution for above is in github https://github.com/chrisseaton/bootstrap/commit/0d9d01a58a2a82210fe3eaa08e9da822d8995024.

Solution Explanation:

• essentially we will need to change lockup, shade, and pinny to all use position absolute on iOS devices
• lockup and shade will be easy, since we just need to use Javascript and set the height/width to cover the entire device screen after setting it to position absolute
• changing Pinny to position absolute will raise 2 issues:
  1. positioning of the pinny will need to depend on the Pinny config (open from center/top/left...) + window.pageYOffset
  2. iOS will scroll the window to the input elements that are focused, except for position:absolute elements, so we have to counteract that by scrolling the window manually to the cumulative offset height of the active element (to get the offsetHeight: https://github.com/sstephenson/prototype/blob/d9411e5/src/prototype/dom/layout.js#L1080)

Questions:

• This is a pretty huge change and definitely will open up a can of worms, so I'm not sure if you guys want to proceed with this right now, or maybe verify this with Kyle when he's back.
• It'll take me more than a day to work on this if we are proceeding, so I want to make sure I have the time resourced before moving on to work on this.

[kpeatt]

What if we just blur the input on orientation change?

[wizardlyhel]

We can definitely do that but is this something we want to integrate into Pinny? Or just leave it as an workaround and be implemented when issue arises?

[kpeatt]

I think it could be integrated into Pinny — this is a fault with our Pinny implementation and it's a good fix for it.

[wizardlyhel]

@scalvert If you are okay with it, I can have @hcstephencheung to implement this.

[scalvert]

To be clear, we're proposing fixing this by blurring on orientation change, correct?

[wizardlyhel]

Yes, blurring inputs on orientation change

[scalvert]

[scalvert]

http://mir.aculo.us/2009/01/11/little-javascript-hints-episode-3-force-redraw/

[kpeatt]

I didn't think this was a redraw issue but instead was a problem with how iOS updates its position properties.