Ошибка Mobile Safari на кнопке с фиксированным положением после программного изменения scrollTop?

Я обошел это, добавив 101% высокий div, а затем (почти) сразу удалив его.

Пытаться:

<style>
.iosfix {
  height: 101%;
  overflow: hidden;
}
</style>

и когда вы прокручиваете:

window.scrollTo(0, _NEW_SCROLLTOP_);
$('body').append($('<div></div>').addClass('iosfix'));
setTimeout(function() {
  $('.iosfix').remove();
}, 500);

Он также работает с jQuery.scrollTo.

См. пример здесь.

Мы также столкнулись с этой ошибкой в ​​2 разных приложениях для iPad. Для нас лучшим решением было временно удалить фиксированную позицию из фиксированного элемента после завершения анимированной прокрутки, а затем использовать window.scroll с вертикальным значением, которое мы только что выполнили. прокрутите, затем, наконец, повторно примените стиль с фиксированной позицией. Это вызывает очень незначительное всплеск, поскольку ipad повторно отображает элемент, но это предпочтительнее, чем ошибка.

var $fixedElement = $('#fixedNavigation');
var topScrollTarget = 300;
$("html:not(:animated),body:not(:animated)").stop().animate({ scrollTop: topScrollTarget }, 500, "swing", function(evt) {
    $fixedElement.css({ "position": "relative" });
    window.scroll(0, topScrollTarget );
    $fixedElement.css({ "position": "fixed" });
});

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

Сначала я попытался добавить 1 пиксель к ширине фиксированных элементов и удалить его. Это вызвало повторный рендеринг, но повторно визуализированные элементы стали неправильно выровнены с элементами без повторного рендеринга — я подозреваю, что это еще один результат этой ошибки iOS. Ответ заключался в том, чтобы просто добавить к ширине тела и снова вычесть (или установить авто), т.е.:

//jQuery will calculate the current width and then +1 to this and set it
$('body').css('width', '+=1');

//Remove width css
setTimeout(function() {
  $('body').css('width', '');
}, 1);

Если вы не используете jquery, вам нужно будет получить текущую ширину тела + 1 пиксель, а затем установить ширину.

Вот мое решение, если, как и я, ни одно из предыдущих решений не работает для вас.

Хитрость заключается в следующем:

• Сделайте свою прокрутку (Animate или scrollTo и т. д.)
• Сразу после прокрутки position:absolute ваших фиксированных элементов
• В событии touchmove восстановить позицию: исправлено

Вот пример:

  $('body').animate({
       scrollTop: newPos}, 1000, 'jswing', function () {
          $('header').css({position:'absolute', top:newPos});
  });

  $(document).bind('touchmove',function(){
       $('header').css({position:'fixed', top:'0px'});
  });   

Я использовал тот же трюк для липкого нижнего колонтитула и других плавающих фиксированных элементов.

Вариант этого работал и для меня. Стараюсь не использовать фреймворки там, где это возможно на мобильных устройствах.

    var d = document.createElement("div");
    d.style.height = "101%";
    d.style.overflow = "hidden";
    document.body.appendChild(d);
    window.scrollTo(0, scrollToM);
    setTimeout(function() {
        d.parentNode.removeChild(d);
    }, 10);

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

Пример:

$('body, html')
    .animate({scrollTop: 0})
    .scrollTop(0);

У меня была такая же проблема с iOS5 и JQueryMobile. Фиксированный верхний и нижний колонтитулы. Расширяемый контент, и внезапно у меня появился призрачный нижний колонтитул, который можно было увидеть, но нельзя было потрогать. У меня была небольшая проблема с прямым изменением положения на абсолютное, а затем возвращение к работе. Казалось, что это срабатывало только время от времени. В итоге я использовал это.

        $(myFixedFooter).css("position", "relative").hide(0, function () {
            $(this).show(0).css("position", "");
        });

Это вызывающе создает «вспышку», поскольку нижний колонтитул делает свое дело. Однако я обнаружил, что около 98% времени нижний колонтитул оставался внизу страницы. Все другие обходные пути и настройки, которые я нашел и попробовал, не всегда оставляли нижний колонтитул внизу или они не решали проблему в первую очередь.

Надеюсь, Apple скоро исправит.

Я обнаружил точное поведение, которое вы описываете, в приложении для iPhone, которое я пишу. Я загружаю кучу HTML-текста с индексом справа. После выбора элемента в меню и прокрутки текста меню переставало отвечать (потому что зона приземления прокручивалась из-под него). Я также увидел, что даже крошечная прокрутка текста снова активирует индексное меню.

Я создал тестовый пример и загрузил файл сюда (если вы просматриваете его в браузере, отличном от iPhone, сделайте окно маленьким по вертикали, чтобы увидеть правильное поведение):

http://www.misterpeachy.com/index_test.html

Я понял, что индексное меню прокручивалось вместе с текстом (хотя видимое меню не двигалось) после того, как я нажал B, а затем снова нажал B. Вместо прокрутки до B (практически не двигаясь), он прокручивается до D.

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

В случае, если это может помочь кому-то:

У меня была точно такая же проблема, и мой код выглядел примерно так (это одностраничное веб-приложение):

window.scrollTo(0,0);
$('section.current').removeClass('current');
$(target).addClass('current');

Я часами пробовал все (дивы высоты 101%, изменение типа позиции...), но, наконец, последнее предложение, описанное на Device-Bugs спас положение. В моем случае это был просто вопрос прокрутки, когда div не отображаются:

$('section.current').removeClass('current');
window.scrollTo(0,0);
$(target).addClass('current');

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

https://stackoverflow.com/a/11479118/43217

Пример кода

if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
    $(document).on('focus', 'input, textarea', function() {
        $('header').css({'position':'static'});
    });
    $(document).on('blur', 'input, textarea', function() {
        $('header').css({'position':'fixed'});
    });
}