iOs和Firefox中的输入字段怪异错误（仅限设备）

Question

我的网站顶部有一个搜索输入字段，当我向下滚动（顶部是固定的）时隐藏。当我单击搜索按钮时，输入字段将再次显示。

现在的问题是，当我向下滚动时单击输入字段时，我的整个页面会向上滚动到输入字段的原始位置，然后显示键盘。

输入字段与顶部的输入字段相同，因此我不确定为什么它会一直向上滚动到顶部。

奇怪的＆＃39;事情是它在Chrome和桌面上完美运行。

TL; DR：当我尝试点击输入字段时，它会一直向上滚动到原始位置。

HTML：

<header class="top">

    <div class="container">

        <div class="logo">
            <a href="{$basedir}" title="{'Go to home'|lang}" class="main-logo">
                <img src="{$basedir}images/common/logo.png" width="150" height="50" alt="{$siteName|escape}" data-highres-url="{$basedir}images/common/logo@2x.png">
            </a>
        </div>

        <div class="search">
            {include file="form/search.tpl"}
        </div>

    </div>

</header>
<div id="nav-toggle-container">
    <a id="nav-toggle-btn" class="visible-xs visible-sm" href="javascript:void(0);">
        <span></span>
    </a>
</div>

Jquery代码：

$(function()
{
    var $header = $('header.top');

    var $input = $header.find('input[type=search]');
    var $search = $header.find('div.search');
    var $searchContainer = $header.find('div.input-group')
    var $searchBtn = $search.find('button.icon-search');
    var $closeBtn = $search.find('span.icon-cross');
    var $window = $(window);
    var $document = $(document);

    $closeBtn.css('display', 'none');

    function smallTopCheck()
    {
        if ($window.width() < 992)
        {
            $document.on('scroll', function()
            {
                if ($document.scrollTop() > 20)
                {
                    // Turn top into small menu
                    $header.addClass('small');

                    // Prevent search button to search
                    $searchBtn.on('click', function (e) {
                        e.preventDefault();
                    });

                    // Open search bar when clicking button
                    $document.on('click', '.icon-search', function () {
                        $searchBtn.off('click');
                        $searchContainer.addClass('search-open');
                        $input.val("");
                        /*$input.focus();*/

                    });

                    // Close search bar when clicking button
                    $document.on('click', '.icon-cross', function () {
                        $searchBtn.on('click', function (e) {
                            e.preventDefault();
                        });

                        $searchContainer.removeClass('search-open');
                    });
                }
                else
                {
                    // Reverse small menu
                    $header.removeClass('small');

                    if($searchContainer.hasClass("search-open"))
                    {
                        $searchContainer.removeClass('search-open');
                    }

                    // Return search function
                    $searchBtn.off('click');
                    $document.off('click', '.icon-search');
                }
            });
        }
        else
        {
            // Remove small top
            if($header.hasClass("small"))
            {
                $header.removeClass("small");
            }

            if($searchContainer.hasClass("search-open"))
            {
                $searchContainer.removeClass('search-open');
            }

            $window.off('scroll');
        }
    }

    smallTopCheck();

    // if window is resized check again

    var doneResizing;
    $( window ).resize(function()
    {
        window.clearTimeout(doneResizing);
        doneResizing = window.setTimeout(function()
        {
            smallTopCheck();
        }, 250)
    });
});