Keyboard on iPad moves modal fade background

[chrisseaton]

I'm using Bootstrap for an iPad web app. I use the modals to present input controls. The screen looks like this when the modal is opened:

That's what I'd expect - it's off the screen a bit at the bottom due to its size, which is what I think is correct with the new modals.

However, when I click in one of the input controls, Safari I think centres the input control, and the modal's fade background is no longer in the right place:

This is 3.0 RC1.

[cvrebert]

@chrisseaton Could you try with the current HEAD revision on the 3.0.0-wip git branch?

[chrisseaton]

It's actually worse on the latest version (b6390d2) because now the dialog itself is cut off at the same point as the fade. See attached:

I had this problem with 2.x and was hoping that it was fixed in 3. It seems strange that nobody else has seen this error - am I unusual in using input controls in modals?

[chrisseaton]

Test case: https://gist.github.com/chrisseaton/6152228. Click the button at the bottom. Try this with the iPad simulator (sorry if you don't have that, but I can't think of another way to suggest to reproduce). Note that if the button is at the top you don't get the problem, so it's some combination of the page being scrolled down, and the modal scrolling for the input.

I would turn this into a failing test case, but I'm afraid I don't know enough about your test suite and testing CSS in general to be able to do that with the time I have available.

[chrisseaton]

These two StackOverflow questions are relevant:

http://stackoverflow.com/questions/14492613/ios-ipad-fixed-position-breaks-when-keyboard-is-opened

http://stackoverflow.com/questions/7970389/ios-5-fixed-positioning-and-virtual-keyboard

[chrisseaton]

The problem is essentially that iPhone Safari does not update the position of fixed elements when the keyboard is shown, even though this changes the geometry of the viewport. Some people suggest timers to keep rearranging stuff while an input is focused, and so the keyboard likely open, apart from that, there are few ideas.

[mdo]

/cc @fat who might have some input.

[fat]

added a comment to our browser support page. This isn't something we'd use js to solve if we did want to provide a solution for it though – so i'm going to untag js.

Personally, i think the best solution is onFocus, transitioning position fixed elements (the modal and the backdrop) to position absolute, and removing the height of the modal element so that it is free scrolling on the body of the page.

[ridjohansen]

if( navigator.userAgent.match(/iPhone|iPad|iPod/i) ) {

    $('.modal').on('show.bs.modal', function() {

        // Position modal absolute and bump it down to the scrollPosition
        $(this)
            .css({
                position: 'absolute',
                marginTop: $(window).scrollTop() + 'px',
                bottom: 'auto'
            });

        // Position backdrop absolute and make it span the entire page
        //
        // Also dirty, but we need to tap into the backdrop after Boostrap 
        // positions it but before transitions finish.
        //
        setTimeout( function() {
            $('.modal-backdrop').css({
                position: 'absolute', 
                top: 0, 
                left: 0,
                width: '100%',
                height: Math.max(
                    document.body.scrollHeight, document.documentElement.scrollHeight,
                    document.body.offsetHeight, document.documentElement.offsetHeight,
                    document.body.clientHeight, document.documentElement.clientHeight
                ) + 'px'
            });
        }, 0);
    });
}

[chrisseaton]

This patch absolutely positions the modal at the point of it being opened, but the problem is that when you focus an input control the viewport will move but absolute elements will not be moved with it. I'm not sure it solves the problem - does it work for you? Do you have a branch I can try it out on?

[ghost]

modális ponton annak kinyílását, de a probléma az, Ön számára? Van egy ág tudom próbálja ki?

[ridjohansen]

@chrisseaton This solution is so ugly but works very well

[mwaterfall]

@chrisseaton @ridjohansen That fix worked great for now. I did notice some flickering when displaying the modal on an iPhone, but setting the modal backdrop changes to happen after 1 second fixed it.

[ghost]

ExecuteDbDataReader Query GetFullQuerySet ShowLatest:,? Én észre néhány pislákoló megjelenítésekor a modális ?1 másodperc elteltével rögzített ez.,

[genaby]

it can be much simpler:

$.fn.iOsModalFix = function() {
if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
var $inputs = this.find('input'), scrollTop;
$inputs.on('focus', function() { scrollTop = $(window).scrollTop(); })
.on('blur', function() { $(window).scrollTop(scrollTop); });
}
return this;
};


[gabesumner]

I fought all weekend with this and still don't have an optimal solution.

However, here are couple of resources I discovered in my travels.

Issues with position fixed & scrolling on iOS
(Lots of great information on the core problem)
http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/

Bootstrap 3 Modals and the iOS Virtual Keyboard
(Contains more info about the code snippet shown above)
http://www.abeautifulsite.net/blog/2013/11/bootstrap-3-modals-and-the-ios-virtual-keyboard/

I've also experimented with binding to the 'blur' event for input elements and calling scrollLeft. This small action seems to force iOS WebKit to redraw the page, which fixes some of the chaos wrought by the virtual keyboard.

    $('input').on('blur', function(){
      setTimeout(function() {
        $(window).scrollLeft(0);
      }, 200);
    })

Disappointing that this has been a problem since 2012 and Apple still hasn't addressed it.

[gabesumner]

I have no idea if this will work for others, but the following code and CSS seems to work for me.

// This entire section makes Bootstrap Modals work with iOS
// This entire section makes Bootstrap Modals work with iOS
if( navigator.userAgent.match(/iPhone|iPad|iPod/i) ) {

  $('.modal').on('show.bs.modal', function() {
    setTimeout(function () {
      scrollLocation = $(window).scrollTop();
      $('.modal')
          .addClass('modal-ios')
          .height($(window).height())
          .css({'margin-top': scrollLocation + 'px'});
    }, 0);
  });

  $('input').on('blur', function(){
    setTimeout(function() {
      // This causes iOS to refresh, fixes problems when virtual keyboard closes
      $(window).scrollLeft(0);

      var $focused = $(':focus');
      // Needed in case user clicks directly from one input to another
      if(!$focused.is('input')) {
        // Otherwise reset the scoll to the top of the modal
        $(window).scrollTop(scrollLocation);
      }
    }, 0);
  })

}

And this CSS...

.modal-ios {
    position: absolute;
    overflow: visible
}

I'm certainly not the best developer so take this with a grain of salt.

[aravindravi]

I faced the same problem while using a modal popup on iPad. This is the only thing I used to fix it and it works on all platforms.

.modal-backdrop
{
     top: -800px;  
}

A part of modal-backdrop initially lies virtually above the screen so even if the backdrop slides down with the virtual keypad, it covers up the entire screen and doesn't look broken. This however can't be used as a fix for all position:fixed elements but serves well in this case.

[cvrebert]

I can no longer seem to reproduce this as of iOS 8.0 (possibly as a side-effect of https://bugs.webkit.org/show_bug.cgi?id=153224 ).