(Issue 3402) Add work-around for iOS 7 Safari bug impacting bootstrap modal

[mrvisser]

Turns out this is a bug in iOS 7 Safari: twbs/bootstrap#9023

Basically Safari is not updating the position of fixed elements after it expands / collapses the keyboard (or other items such as the tool bar).

I've resolved this issue by using a posted work around, which tests to work well, though is a bit of a hack. I'm not aware of any better solutions to the problem.

[bertpareyn]

This looks good, since we will remove the patch after bootstrap fixes it it can probably stay in the bootstrap.focus js.

[bertpareyn]

This introduces another issue where the modal doesn't take full width on the iPad.

[mrvisser]

This also has the opposite effect on iphone. I'll investigate.

[mrvisser]

@BP323 Did an iteration on this:

• Removed the CSS being set in the workaround that set a top-margin on the body and made it absolute. That absolute positioning I believe contributes to the modal falling out of the scope of the modal backdrop in your screenshot
• Set initial / maximum zoom meta data. This should avoid zooming when the modal wants to be bigger than the page (saw that on iPhone), and also doesn't fudge with the viewport zoom when switching orientation, this appears like it may be having an effect in your screenshot (Did you switch from vertical orientation to horizontal orientation in that screenshot, by any chance?)

This fixes similar issues on iPhone that seem to appear in your screenshot. I don't have an iPad to test with, so can you give this a whirl? The branch is available on QA2 at the moment

[bertpareyn]

Closing in favor of oaeproject#3512