Improve iOS fullscreen UX

[jouni]

See if there are ways to enhance the end user experience, compared to the feature/fullscreen-ios branch prototype, including:

• Double tapping on elements outside the dropdown list
• Touch dragging other elements than the dropdown list
• Refocusing the input field

[jouni]

iron-dropdown has similar issues, but it tries to prevent user scrolling outside the dropdown element at least. But when you scroll the dropdown itself, the whole page sometimes scrolls as well.

[jouni]

The first two bullet points in the list are closely related, and we should try to find a better solution to that than using a timer to reposition the viewport (by using event.preventDefault() for example). Timebox to 1 person day.

The third bullet point (about input refocusing) can be ignored at the moment, the current workaround in the fullscreen-ios branch is acceptable for 1.0.

[tehapo]

One attempt to fix scrolling issues: https://github.com/vaadin/vaadin-combo-box/tree/feature/ios-fullscreen-part2

Basically this version prevents scrolling on other elements than the iron-list (by using Polymer.IronDropdownScrollManager) and at the same time limits the scroll position of the iron-list to be within 0 – iron-list._maxScrollTop by listening to touchmove events and using preventDefault when going outside the limits.

Using this approach has some drawbacks with the scrolling UX.

• No "rubberband" effect when the scroll limit was already reached when the scrolling starts.
• Changing the scroll direction does not work after going over the limited area, but only during the same touch gesture.

[platosha]

Another attempt: https://github.com/vaadin/vaadin-combo-box/tree/feature/ios-fullscreen-fixed

My approach:

• the #dropdown style is { position: fixed } again (back to the default)
• the body gets { position: fixed } as well
• the body listens to touchmove events and calls event.preventDefault() when event.target is either #dropdownContent, paper-input-container or a paper-input-container descendant.

Pros:

• Resolves the refocusing input field issue
• Less work for positioning the overlay than with current absolute styles for #dropdown
• Doesn't affect scrolling of iron-list

Cons:

• A bit clumsy transition when dropdown opens

[jouni]

@tuomasnironen should test each of the prototypes and provide feedback about them in order for us to make a decision on how to improve.

[tuomasnironen]

New direction for the UI decided that no longer contains a fullscreen feature. This will be evaluated separately.