Form Inputs in fixed navbar breaks it on iOS 7

[gastonmorixe]

Hi guys,

I think this issue is the same as issue #9757.

I reproduced it on iOS 7, just having an input on the navbar if the scroll is not at the top, at the moment the keyboard appears, the navbar goes down the same amount the scroll was at.

Thanks.
Ton.

[gastonmorixe]

After researching a bit, it seems to be a common bug in iOS, which doesn't seem to be solved in iOS7.

Here you can find out more about this.

http://stackoverflow.com/questions/15199072/ios-input-focused-inside-fixed-parent-stops-position-update-of-fixed-elements
http://stackoverflow.com/questions/15273098/how-do-i-stop-my-fixed-navigation-from-moving-like-this-when-the-virtual-keyboar
http://stackoverflow.com/questions/8057485/positionfixed-in-ios5-moves-when-input-is-focused
http://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/

[cvrebert]

I think this is the same issue that we currently mention in the context of modals: http://getbootstrap.com/getting-started/#mobile-modals

[gastonmorixe]

@cvrebert you are right, didn't notice that. Should this be closed or can we came up with a solution?

[cvrebert]

I think we should document it for navbars like we already do for modals.

[gastonmorixe]

Ok. Just for the record of someone looking at this issue, this is the solution I am using right now and is working properly.

JS/coffee

# iOS FIXED FIX
if Modernizr.touch
    $body = $('body')
    $(document).on 'focus', 'input', (e)->
        $body.addClass('fixfixed')
        setTimeout =>
            $(document).scrollTop($(this).scrollTop())
        , 10
    $(document).on 'blur', 'input', (e)->
        $body.removeClass('fixfixed')

and then in the css/sass

body
  &.fixfixed
    #YOUFIXEDRELEMENT
      position: absolute

[gastonmorixe]

👍