CODEWITHSUNDEEP
javascripthtmlios
Selirion
Selirion

Reputation: 565

HTML text input breaks positioning on Iphone 6/7 plus

I try to find some workarounds for mobile safari bug:

For example I have a clear html page with

  1. Viewport settings width=device-width, noscalable
  2. Body with position:fixed
  3. Two HTMLInputs created by js and placed to center of screen

All works fine on ever devices but on Iphones 6 plus and 7 plus we have a great problem:

If I've focus input and then hide keyboard, all window positioning become diverged from rendered position. Input could be only focused if I've click ~100px higher of it visible position. Moreover, each additional elements on page (even canvas with webgl content) also will get wrong coordinates on each tap/touchstart and so on.

I've connect iphone for debug, and I can see that browser thinks that input placed not where it rendered. Also i can vertically scroll page with finger, and real rendered inputs will stay in place, but area from browser will moves up and down right up to his rendered position. enter image description here

Bug could be reproduced only if few tabs opened in browser in landscape orientation (i'll highlight tabs red on screenshot).

Can't reproduced on iphones5-6, because there is no tabs, but also can't be reproduced on ipad, which has the same tabs.

Example is here: http://baker-feather-16713.bitballoon.com/

Upvotes: 1

Views: 362

Answers (1)

Selirion
Selirion

Reputation: 565

Problem is the fact that safari allow user to scroll page to fullscreen ever if you set html/body width and height to 100%. So, when keyboard showed content scrolls up despite that body has position "fixed" and it rendered with bug when keyboard becomes hidden.

Solution is very simple: just need to do scrollTo(0, 0) when keyboard hidden, e.g.:

document.addEventListener('focusout', function(e) { window.scrollTo(0, 0) });

Upvotes: 1

Related Questions