Bootstrap: Switching between text inputs within Modal flickers on iOS

Created on 17 May 2016 · 19Comments · Source: twbs/bootstrap

I have a bootstrap modal that contains a form with text and email fields. Moving between inputs by clicking, or using ios keyboard tab, causes a 'jumping' effect. The entire modal seems to re-render or slide down, animate again, and then the correct field is focused. The issue seems to be related to height of modal, often the first 3-4 input fields work fine, and then the fields closer to the bottom will have this issue.

Steps to recreate

http://output.jsbin.com/pusayir
launch modal
focus/click field 7
focus/click field 6
focus/click field 5

System info:
Apple ipad2, v9.3.1
Chrome: 50.0.2661.95
Bootstrap: v3.3.6

browser bug confirmed css v3

Source

eozelius

👍1

Most helpful comment

Filed https://bugs.webkit.org/show_bug.cgi?id=158276

cvrebert on 1 Jun 2016

👍3

All 19 comments

Hi @eozelius!

You appear to have posted a live example (http://jsbin.com/pusayir/edit), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

line 72, column 17 thru column 24: The center element is obsolete. Use CSS instead.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)

twbs-lmvtfy on 17 May 2016

<center>s removed from my code. Thanks @twbs-lmvtfy

eozelius on 17 May 2016

@eozelius Does this happen in Safari, Chrome, or both? (on iOS)

cvrebert on 17 May 2016

Possible X-Ref: #17324

cvrebert on 17 May 2016

Hello @cvrebert, this issue happens on both safari and chrome

eozelius on 17 May 2016

Ok, I can see what you're referring to on my iPhone.
Very unlikely we can do anything about it on our end, but we can file a WebKit bug about it.

cvrebert on 18 May 2016

@cvrebert Please file this WebKit bug

mantrax314 on 1 Jun 2016

Filed https://bugs.webkit.org/show_bug.cgi?id=158276

cvrebert on 1 Jun 2016

👍3

@cvrebert Thanks for the info a lot, I have wasted a day or more trying to find a work around to this. I can finally show the URL of webkit bug & tell client we cant do much here :) cheers.

ImranBug on 1 Aug 2016

😄1

@cvrebert Hi again, I ended up using a work around which might help other people who end up in this thread.
I am simply hiding entire layout then showing popup as a normal div (without fixed or absolute position). This gives a feel of popup & seems like the most closest acceptable solution to this bug.

Click here for the demo and here for editor.
Further details are here

ImranBug on 2 Aug 2016

👍1

I've run into same issue today. fixed it by moving width/height from "%" to "vh", "vw" for .modal dialog.

Marshevskyy on 7 Mar 2017

👍1

@Marshevskyy I'm encouraged by your comment. However, changing all modal-related width and height values from % to vh didn't seem to change the behavior for me. I'm using Bootstrap 3 and Featherlight (and the flicker seems to happen even if I remove Bootstrap entirely). If you'd be willing to share more specifically how you solved the problem, I'd appreciate it! Are you using http://getbootstrap.com/javascript/#modals? Where/what did you edit? Thanks!!