iOS Safari: привязки внутри фиксированного элемента работают только один раз

Question

Пожалуйста, посмотрите на эту скрипку: http://fiddle.jshell.net/ikmac/q7gkx

Используйте эту ссылку для проверки в браузере: http://fiddle.jshell.net/ikmac/q7gkx/show/

HTML:

<div class="nav">
    <a href="#test1">test1</a>
    <a href="#test2">test2</a>
    <a href="#test3">test3</a>
</div>

<div id="test1" class="test">test1</div>
<div id="test2" class="test">test2</div>
<div id="test3" class="test">test3</div>

CSS:

.nav {
    position: fixed;
    top: 20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: #000;
}

.nav a {
    float: left;
    font-size: 20px;
    color: #fff;
}

#test1 {
    margin-top: 1000px;
    height: 1000px;
    background: red;
}

#test2 {
    height: 1000px;
    background: blue;
}

#test3 {
    height: 1000px;
    background: green;
}

Вот что происходит в Safari на iOS 5.0 (4.3 не поддерживает фиксированную позицию):

При первом нажатии на один из якорей страница переходит на страницуправильный якорь.После этого я больше не могу нажимать на другие ссылки.Когда я немного прокручиваю вверх или вниз, ссылки снова становятся кликабельными.

Все остальные браузеры для настольных компьютеров работают нормально.

У кого-нибудь когда-либо возникала эта проблема раньше или она знает, как ее исправить?

Answer 1

У меня тоже есть эта проблема.И я наполовину решил это, позволив javascript прокручивать навигацию при нажатии на ссылку навигации.И поскольку обычная сенсорная прокрутка не дает события, пока палец не отпускает экран, я использую position: fixed, который делает сенсорную прокрутку приятнее, чем может JavaScript, см. apple dev-site .

Это не окончательное решение, но, на мой взгляд, это лучше, чем вообще не работать.Этот скрипт также проверяет ширину окна, чтобы убедиться, что он применяет это только к меньшим экранам, ну, к устройствам.

Вот мой код, и если вы найдете его полезным, сделайте его лучше или найдите лучшеРешение, пожалуйста, поделитесь:)

/* NAV POSITION */

var specScroll = false; // If special scrolling is needed

/* Check what kind of position to use.*/
(function navPos() {
    var width = checkWidth();

    if (width <= 480 || navigator.userAgent.match(/iPad/i) != null) {
        specScroll = true;
    }else{
        specScroll = false;
        window.onscroll = NaN;
    }
})();

$(window).resize( function(){ navPos(); } ); // After resizing, check what to use again.


/* When clicking one of the nav anchors */
$(function() {
    $('a').bind('click',function(e){
        var $anchor = $(this);

        if(specScroll){
            $('#nav').css('position', "absolute");
            window.onscroll = anchorScroll;
        }
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 700,'easeOutExpo', function(){
            if(specScroll){setTimeout("window.onscroll = touchScroll;", 100);} 
            // the set timeout is needed for not overriding the clickability of the anchors after anchor-scrolling.
        });

        e.preventDefault();
    });
});

/* While the user clicks and anchors in nav */
function anchorScroll() { $('#nav').css('top', window.pageYOffset); }

/* the first time the user scrolls by touch and lift the finger from screen */
function touchScroll() { 
    $('#nav').css('position', 'fixed');
    $('#nav').css('top', 0);
    window.onscroll = NaN;
}

/* CHECK WIDTH OF WINDOW */
function checkWidth() {
    myWidth = 0;
    if( typeof( window.innerWidth ) == 'number' ) {
        myWidth = window.innerWidth;    //Non-IE
    } else if( document.documentElement && ( document.documentElement.clientWidth ) ) {
        myWidth = document.documentElement.clientWidth; //IE 6+ in 'standards compliant mode'
    } else if( document.body && ( document.body.clientWidth ) ) {
        myWidth = document.body.clientWidth;    //IE 4 compatible
    }
    return myWidth;
}

Я использую это решение на странице проекта, попробуйте: dare.niklasek.se

Answer 2

Я столкнулся с той же проблемой, используя навигацию с фиксированной позицией, которая прокручивает пользователя по странице с помощью анимации jQuery.Я обнаружил, что, хотя элемент с фиксированной позицией виден в новой позиции, проверка его с помощью js сообщает, что он все еще возвращается в исходную позицию, пока пользователь не переместит экран вручную.До тех пор, хотя навигация присутствует визуально, ее нельзя трогать, чтобы взаимодействовать с ней.Больше информации и демо здесь: http://bit.ly/ios5fixedBug