iOS - Fixed Header Position Shifts When Checkbox Closes Keyboard

Question

I have noted other Q & A strings similar to my problem, however nothing quite the same nor resolving my exact issue.

I have a text area and beneath that are 2 checkboxes.

When on an iOS device & inputting to the text field (the virtual keyboard displays), the 'fixed' header remains in place, and when clicking 'Done' on the keyboard the header still remains in place correctly.

My issue is once someone has entered text into the field and prior clicking done, the user unchecks a checkbox. This causes the header to shift down.

It seems as though the focusout/blur of the text area to the checkbox closes the keyboard and dispositions the header.

It then can return to the correct fixed position if the user taps the screen. - Again, something not registering with the in between states of focus & blur.

Any help would much be appreciated.

Thanks,

Img 1: Entering text into the text area. Img 2: Clicking done post inputting text - removing the keyboard. Img 3: Entering text into the text area, then unchecking a checkbox - removing the keyboard & 'shifting' the header's position.

HTML:

<div class="tweet-inputs">
                <textarea name="tweet" class="tweet-field" placeholder="Share your thoughts..." maxlength="140" ng-model="tweetStatus"></textarea>
            </div>
            <div class="clearfix">

            <div class="check">
                    <input type="checkbox" value=" "name="auto-tag" ng-model="autoHash"/>Auto Hashtag  #MakeDid
                    <input type="checkbox" value=" "name="auto-tag" ng-model="autoHash2"/>Auto Hashtag  #DesignIndaba
                </div>

                <a value="POST" class="tweet-btn nav-btn" ng-click="sendTweet(tweetStatus, autoHash, autoHash2, replyOn)">POST</a><span class="spinning"></span> 
            </div>

CSS:

.header-wrapper {
background: #7a7575;
z-index: 99;
box-shadow: none;
text-align: center;
color: white;
height: 75px;
position: fixed;
top: 0;
left: 0;
width: 100%;
}

JS (I've included but doesn't seem to work):

$('input[type="checkbox"]').on('focus', function(){
    $('header-wrapper').css({position:'absolute', top: '0'})
    $(window).scrollTop(0)    
})
$('input[type="checkbox"]').on('blur', function(){
    $('header-wrapper').css({position:'fixed'})
})

Answer 1

The issue appears to be related to how iOS handles fixed-positioned elements when the keyboard appears. It seems that iOS makes fixed-position elements absolutely positioned and applies calculated coordinates such that it would APPEAR to be in the same place.

You can see this in the case of a fixed header on a page with a form (eg., a billing address page). If you tap into a lower field to access the keyboard and then scroll back up the page, the fixed header is hanging out there, obscuring some of the form...

It looks like there's another issue at play in this case, and that's when the user immediately focuses from a keyboard input (text, text area, email, etc.) to a checkbox, whereby the fixed positioned element doesn't lose it's faux absolute position. Not sure if that's a bug in iOS or what, but it certainly is a rendering inconsistency.

My workaround for this is to force a re-draw of the page (jQuery):

$('[type="checkbox"]').on('click', function() {
    window.setTimeout(function() {
        $(window).scrollTop($(window).scrollTop());
    }, 20);
});

The setTimeout is required, as I think it forces enough of a delay for the page to reposition itself before you kick it back into submission. Trying the fix without setTimeout didn't work for me at all.