Ошибка Mobile Safari на фиксированной позиционной кнопке после scrollTop программно изменилась...?

Ответ 1

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

Try:

<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 с вертикальным значением wed, просто выполнив анимированная прокрутка, затем, наконец, снова примените фиксированный стиль позиции. Это вызывает очень незначительную ошибку, поскольку 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" });
});

Ответ 3

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

Сначала я попытался добавить 1px к ширине фиксированных элементов и удалить его. Это действительно вызвало повторный рендеринг, но повторно отображаемые элементы стали неправильно выровнены с нереализованными элементами - еще один результат этой ошибки 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, вам нужно будет получить текущую ширину тела + 1px, а затем установить ширину.

Ответ 4

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

Трюк:

• Сделайте свой свиток (Анимать или прокручивать и т.д.).
• Сразу после вашего прокрутки позиция: абсолютные фиксированные элементы
• В событии "touchmove" восстановите позицию: зафиксировано

Вот пример:

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

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

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

Ответ 5

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

    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);

Ответ 6

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

Пример:

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

Ответ 7

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

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

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

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

Ответ 8

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

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

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

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

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

Ответ 9

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

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

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

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

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

Ответ 10

Другим вариантом решения является увеличение размера ширины документа на 1px, а затем немедленное его отмена. Это имеет то преимущество, что вы не создаете никаких элементов, и я не испытывал никаких мерцаний.

fooobar.com/questions/150740/...

Ответ 11

Пример кода

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'});
    });
}