CODEWITHSUNDEEP
javascripthtmliosiframesafari
jt3k
jt3k

Reputation: 700

Mobile Safari. Sudden movement in form inside of iframe

I have a form inside of iframe.

I see the sudden movement of the viewport after I turn on the fields of this form by clicking on the arrows on the virtual keyboard IOS

I noticed this problem in mobile Safari(ios8), and only when the form in the frame.

The "Run code" button not visible if open stack-overflow in iOS, therefore link to working example in here.

Code snippets here:

.a { background-color: #f00 }
.b { background-color: #0f0 }
.c { background-color: #00f }
.d { background-color: #ff0 }
.e { background-color: #0ff }
.f { background-color: #f0f }
.g { background-color: #0a0 }
.h { background-color: #a00 }
.z { background-color: #00a }
<input class="a" placeholder="A" type="text"><br>
<input class="b" placeholder="B" type="text"><br>
<input class="c" placeholder="C" type="text"><br>
<input class="d" placeholder="D" type="text"><br>
<input class="e" placeholder="E" type="text"><br>
<input class="f" placeholder="F" type="text"><br>
<input class="g" placeholder="G" type="text"><br>
<input class="h" placeholder="H" type="text"><br>
<input class="z" placeholder="Z" type="text"><br>

IT REPRODUCE ONLY IF THIS CODE OPEN IN IFRAME

To check this:

  1. open the website,
  2. click on the first field
  3. go through the fields by pressing on ">" button(on the virtual keyboard of ios).

After some pressing start twitching movement, and positioning of the screen in the wrong places.

Who faced? How to fix this bug with JS/CSS ?

Upvotes: 2

Views: 672

Answers (2)

Denis Pleshakov
Denis Pleshakov

Reputation: 61

This problem haven't solves for long time

discussions.apple.com/message/23671694

Upvotes: 1

simsom
simsom

Reputation: 2586

It is due to the scrollbar that appears on the iframe due to the length of the form in the viewport. If you do not have anything else on the page other than the iframe, turn the body's scroll bar off by using body { overflow: hidden }

Upvotes: 0

Related Questions