Ошибка мобильного Safari на кнопке с фиксированным положением после программной прокрутки scrollTop ...?

Question

Я только что сделал веб-страницу, но есть одна ошибка в Mobile Safari (iPhone и iPad iOS 5.0.1) с двумя кнопками, которые закреплены в верхнем и нижнем правом углах.

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

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

Что я заметил, так это то, что после программной прокрутки, если вы нажмете чуть-чуть ниже кнопки TOP, вы увидите выделение, как если бы вы нажимали кнопку BOTTOM, и действие нижней кнопки было обработано, что говорит мне об ошибке что при программной прокрутке кнопка фиксированного положения все еще перемещается с остальной частью страницы и не возвращается в свое фиксированное положение до тех пор, пока не будет выполнена фактическая сенсорная прокрутка ....

Кто-нибудь знает способ обойти это ..?

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

http://www.tsdexter.com/ceos

спасибо за помощь.

Thomas

(также, если вы можете указать мне, где я могу отправить сообщение об ошибке в Apple, что было бы хорошо, если только это не было)

РЕДАКТИРОВАТЬ: просто нажмите любую из стрелок отправки, вам не нужно вводить заработную плату / зарплату по умолчанию

РЕДАКТИРОВАТЬ 2: Вот более простой пример, чтобы показать ту же проблему ..

http://www.tsdexter.com/MobileSafariFixedPosBug.html

РЕДАКТИРОВАТЬ 3: Сообщение об ошибке в Apple

Answer 1

Мы также столкнулись с этой ошибкой в ​​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" });
});

Answer 2

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

Попытка:

<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.

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

Answer 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, чтобызатем установите ширину.

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

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

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

Answer 6

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

Пример:

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

Answer 7

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

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

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

Надеюсь, Apple исправит это в ближайшее время.

Answer 8

Пример кода

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

Answer 9

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

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

Answer 10

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

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

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