iOS 11.0.3 + Modal Input On Mobile

[Buildzzz]

Some of our clients just updated to the new iOS 11.0.3. After doing so, it seems that all the input fields within a bootstrap modal are having problems where the cursor doesn't align vertically with the content via mobile browsers. (Tested with Chrome and Safari)

If you open up a modal on your iphone and start typing into a text box, the text is showing but the cursor that follows the text is many rows down horizontally.

Please help with how we can resolve this. Thx

[Johann-S]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and OS details.

[rafalp]

Browserbug: https://bugs.webkit.org/show_bug.cgi?id=176896
Report for BS 3: #24059

[ericbj]

Following. I have the exact same problem

[danilosetubal]

it may not be a bootstrap problem.
I have this same problem in a React project using Material-UI (http://www.material-ui.com/).

[Buildzzz]

Hi @Johann-S ,

You can take any code with a modal popup and replicate the issue.

I tried to use codepen, but ran into issues where the viewer doesn't show the modal. https://codepen.io/buildzzz/pen/KXbVMa

Here is the code:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="form-control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="form-control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>

Bootstrap version is 3.3.7, but I think you'll run into the same issue with 4.0
Browsers tested are on mobile safari and mobile chrome.
iOS 11.0.3

[mdo]

Do we close this out and document the bug or is there a suggested fix yet? Seems to be a platform-wide problem for iOS.

[Buildzzz]

@mdo Has it been confirmed that this is a platform-wide problem for iOS? I was not able to find any news on this.

If so, yes I will close the comment.

[rafalp]

@Buildzzz its confirmed to be bug in WebKit's renderer.

[Buildzzz]

Okay, thanks everyone. Closing.

[coliff]

FYI; This webkit bug is fixed in iOS 11.3 which should be released to public very soon. I've tested this myself (public beta) and confirmed by others.

[Rishats]

@colifff
Not everyone will have this version) So we still try to find fix)

[Rishats]

I find solution for myself, just add position:fixed on the body, when modal open.

[rafalp]

This issue seems fixed as of iOS 11.3 I've didn't do anything about my app in meantime but my modal forms seem to don't display this issue anymore.

[garrit-schroeder]

I am on the newest bootstrap and ios version. Problem still persistent. iPhone 6