iOS9: Select fields in UIWebView breaking app

Question

We are testing how our app, which contains an UIWebView, copes with the new Split View functionality for iPads. And doing so we have run into trouble with select fields.

When the user taps a select field, a popover with the available options appears. However, when the app is resized (by pulling the divider of the split view to the left or right), we see a blank screen or a select list that takes up all of the available space and which cannot be dismissed.

Any ideas?

Answer 1

It seems like the best solution for now would be to dismiss the popover as soon as the resize event is fired. Hopefully, Safari will soon be updated to dismiss popovers automatically, when web views are resized.

In the meantime, you can hook up a resize handler to the window:

window.addEventListener("resize", resizeHandler);

function resizeHandler() {
    safari.self.hide();
}

This appears to be a bug in the popover in Safari. When I go through similar steps, the layout of the web page changes to fit the new dimensions. However, the popover is not re-positioned with the select field. The result is that it is detached from the field that presented it.

Following these steps, I was able reproduce your issue, but to a lesser extent than what you described:

1. With the split bar to the right of the iPad, tap on the select box.
2. Move the split bar to the center of the iPad.
3. The popover is no longer attached the to the select field.

Here's a screen shot of the detached popover:

Here's the original select field position:

Answer 2

The problem still exists with iOS 9.2.1 and iOS 9.3 beta 2.

You can reproduce it with every third-party browser. An HTML Select input on iPad is not working in Slide Over or Split View 1/3 width. https://forums.developer.apple.com/thread/23300

Currently there is no workaround possible, expect not to use HTML select. I have descriped details on the following side. https://medium.com/@chemm/select-inputs-on-ipad-breaking-third-party-browsers-in-slide-over-or-split-view-1-3-952b796d70ad#.shytp1ywi