Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switching between text inputs within Modal flickers on iOS #19927

Closed
eozelius opened this Issue May 17, 2016 · 19 comments

Comments

Projects
None yet
8 participants
@eozelius
Copy link

eozelius commented May 17, 2016

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

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

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

@twbs-lmvtfy

This comment has been minimized.

Copy link

twbs-lmvtfy commented May 17, 2016

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.)

@eozelius

This comment has been minimized.

Copy link
Author

eozelius commented May 17, 2016

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

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented May 17, 2016

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

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented May 17, 2016

Possible X-Ref: #17324

@eozelius

This comment has been minimized.

Copy link
Author

eozelius commented May 17, 2016

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

@cvrebert cvrebert changed the title Text inputs within Modal cause 'jumping' rendering issue on ios Switching between text inputs within Modal flickers on iOS May 17, 2016

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented May 17, 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.

@mantrax314

This comment has been minimized.

Copy link

mantrax314 commented Jun 1, 2016

@cvrebert Please file this WebKit bug

@cvrebert cvrebert added this to the v3.3.7 milestone Jun 1, 2016

@cvrebert cvrebert self-assigned this Jun 1, 2016

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 1, 2016

cvrebert added a commit that referenced this issue Jun 2, 2016

cvrebert added a commit that referenced this issue Jun 2, 2016

@cvrebert cvrebert closed this in 6a1b3a1 Jun 3, 2016

@ImranBug

This comment has been minimized.

Copy link

ImranBug commented Aug 1, 2016

@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

This comment has been minimized.

Copy link

ImranBug commented Aug 2, 2016

@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

@Marshevskyy

This comment has been minimized.

Copy link

Marshevskyy commented Mar 7, 2017

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

@ryancwalsh

This comment has been minimized.

Copy link

ryancwalsh commented Mar 12, 2017

@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!!

@jaythakur

This comment has been minimized.

Copy link

jaythakur commented Jun 2, 2017

I am having same flickring issue on ipad. can you tell any one how can i resolve?

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 2, 2017

This is believed to have been fixed in iOS 10.3.1:
https://bugs.webkit.org/show_bug.cgi?id=158276#c4

@jaythakur

This comment has been minimized.

Copy link

jaythakur commented Jun 2, 2017

Hi

but this solution not working for me.
https://bugs.webkit.org/show_bug.cgi?id=158276#c4

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 2, 2017

What version of iOS are you using?
Link to your affected webpage?

@jaythakur

This comment has been minimized.

Copy link

jaythakur commented Jun 2, 2017

I am using 10.2.1

@jaythakur

This comment has been minimized.

Copy link

jaythakur commented Jun 2, 2017

when i click on any textbox, the whole popup goes up and down.

@cvrebert

This comment has been minimized.

Copy link
Member

cvrebert commented Jun 2, 2017

No good known workaround aside from "update your iOS".

@twbs twbs locked and limited conversation to collaborators Jun 2, 2017

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.