With iOS 11 vertically stacked paper-inputs don't have the input cursor in the right place

[rbjarnason]

Description

With iOS 11 vertically stacked paper-inputs don't have the input cursors in the right place

Expected outcome

The input cursor should be in the same line as the input text.

Actual outcome

The cursor is not in the right place except the first one and it goes more out of sync on the 3rd one.

Live Demo

https://demo-mount-air.idea-synergy.com/community/4 (click Login top right)

Steps to reproduce

Create a page with 3 vertically stacked elements like here: https://github.com/CitizensFoundation/your-priorities-app/blob/master/client_app/src/yp-user/yp-login.html#L304 run on iOS 11 and observe the cursor stop being the right place.

Browsers Affected

• [ ] Chrome
• [ ] Firefox
• [ x] Safari 9
• [ x] Safari 8
• [ x] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10

[rbjarnason]

If you scroll up and down the cursor always seems to snap into the right place but when you start typing again it usually drops back down.

[rbjarnason]

Got it working, for the mobile fullscreen paper-dialog I changed the css from this:

 @media (max-width: 480px) {
        paper-dialog {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
        }
      }

When I changed the css to this it stopped being a problem:

  @media (max-width: 480px) {
        paper-dialog {
          position: absolute;
          display: block;
          top: 0;
          bottom: 0;
          margin: 0;
          min-width: 360px;
          max-width: 1024px;
          width: 100%;
          @apply(--paper-fullscreen-dialog);
        }
      }

Any ideas why?

[notwaldorf]

Is this only reproducible with a paper-dialog? cc @valdrinkoshi

[valdrinkoshi]

The previous setup was correct, as paper-dialog will take care of staying in the center of the screen:

@media (max-width: 480px) {
        paper-dialog {
          padding: 0;
          margin: 0;
          height: 100%;
          width: 100%;
        }
      }

I see that the page is scrolling behind the overlay when the user clicks on one of the inputs, and even clicking in any area of the dialog causes scrolling or makes the dialog "flash". Is this desired?

[rbjarnason]

@notwaldorf Yes, I have only seen it with paper-dialog. @valdrinkoshi Yes, the previous setup works fine on chrome but causes the problem described above.

[rbjarnason]

This was fixed with ios 11.3, more info here https://hackernoon.com/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8