form-control focus position fixed div's issue in iOS devices

by Nikhil krishnan

HTML

<header class="main-header">Header</header>
<input class="form-control" placeholder="type here"/>

CSS

header{
    height:100px;
    line-height:100px;
    text-align:center;
    background:#ccc;
    margin-bottom:20px;
}

JavaScript

//form-control focus header issue in iOS devices
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    $('.form-control').focus(function(){
        $('.main-header, .large-header').css({'position':'relative'});
    });
    $('.form-control').focusout(function(){
        $('.main-header, .large-header').css({'position':'fixed'});
    });
}