Повреждение поля ввода веб-набора iOS

Question

У меня есть поле ввода, отображаемое с использованием следующего HTML:

<nav>
            <ul>
              <li><a href="<?php echo home_url( '/' ); ?>wp-login.php?action=register">add story</a></li>

              <li id="search"> <a href="#">search</a>
                <ul >
                    <li><form action="<?php echo home_url( '/' ); ?>" method="get" id="searchFrm"><input id="search_input"type="text" name="s" id="keyword"/><input type="submit" value="Go"></form></li>
                </ul>
              </li> ...

UL анимируется с помощью функции jQuery toggleSlide:

 $('nav ul li#search a').click( function () {

    //show its submenu
    var target = $('nav ul li#search ul');
    target.slideToggle(100);
    $('nav ul li#highlight ul').slideUp(100);
    target.find('#search_input').focus();

}

);

 $('nav ul li#highlight a').click( function (event) {

    $('nav ul li#search ul').slideUp(100);
    $('nav ul li#highlight ul').slideToggle(100);
}

);

Курсор в текстовом поле появляется немного ниже поля, и текст, введенный во время отображения экранной клавиатуры, становится поврежденным (см. Прикрепленные снимки экрана). Кто-нибудь знает, что может быть причиной этого?

Когда вы нажмете'one 'на экранной клавиатуре, символы будут правильно отображаться в поле ввода.

UPDATE

Css по запросу

nav {
    float: right;
    margin-top: 19px;
}

nav ul li{
    float: left;
    display: block;
    position:relative;
    margin-left: 10px;
    padding-left: 5px;
}

nav ul li a{
    display: block;
    padding: 0;
    height:23px; 
    text-decoration:none;
    text-align: center;
    color: #405ab1;
    margin-bottom: -15px;
}

nav ul li ul{
    display: block;
    list-style: none;
    padding: 10px;
    position: absolute;
    background-color:#FFF;
    width: 170px;
    border: 1px solid #CCC;
    z-index: 100;
    display: none;
    margin-top: 0px;

}

nav ul li ul li{
    display: block;
    margin: 0;
    padding: 0;
}