Mobile Safari bug on fixed pozycjonowany przycisk po scrolltop programowo zmieniony...?

Napotkaliśmy również ten błąd na 2 różnych aplikacjach na iPada, dla nas najlepszą poprawką było tymczasowe usunięcie stałej pozycji ze stałego elementu po zakończeniu animowanego przewijania, a następnie użycie okna.przewijanie z wartością pionową, do której właśnie wykonaliśmy animowane przewijanie, a następnie ponownie Zastosuj styl pozycji stałej. Powoduje to bardzo niewielki blip, ponieważ ipad ponownie renderuje element, ale jest lepszy od błędu.

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

Miałem wiele linków na oddzielnych stałych elementów (modalne popup + stałe div blackout + normalny stały pasek narzędzi) i żadna z tych odpowiedzi nie działała, więc miałem Majsterkowanie o próbowaniu wariacji na ten sam temat. Jak wszystko to sugeruje, kluczem jest ponowne renderowanie elementów.

Początkowo próbowałem dodać 1px do szerokości elementów stałych i usunąć go. To spowodowało ponowne renderowanie, ale ponownie renderowane elementy stały się źle dopasowane do elementów Nie ponownie renderowanych - kolejny wynik tego systemu iOS bug, którego podejrzewam. Odpowiedź brzmiała po prostu dodać do szerokości ciała i odjąć ponownie (lub ustawić na auto), czyli:

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

Jeśli nie używasz jquery, będziesz musiał uzyskać bieżącą szerokość ciała +1px do niego, a następnie ustawić szerokość.

Oto moje rozwiązanie, jeśli tak jak ja, żadne z poprzednich rozwiązań nie działa dla Ciebie.

Sztuczka jest:

• wykonaj swój scroll (Animate lub scrollTo itp.)
• tuż po przewijaniu, pozycja: absolute your fixed elements
• w zdarzeniu 'touchmove' Przywróć pozycję: fixed

Oto przykład:

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

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

Użyłem tej samej sztuczki dla lepkiej stopki i innych pływających elementów stałych.

U mnie też zadziałała taka odmiana. Staram się nie używać frameworków, gdzie mogę na komórce.

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

Po spędzeniu kilku godzin nad tym, znalazłem obejście: spróbuj przewijać (może z animacją), a następnie przewijać ponownie do tego samego punktu (bez animacji).
W ten sposób zmuszasz przeglądarkę do usunięcia błędnego renderowania z widoku.

Przykład:

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

Miałem ten sam problem z iOS5 i JQueryMobile. Poprawiono Nagłówek I Stopkę. Rozszerzalna zawartość i nagle miałem stopkę ducha, którą można było zobaczyć, ale nie dotknąć. Miałem mały problem z uzyskaniem prostej zmiany pozycji na absolute, a następnie z powrotem do pracy. Wydawało się, że działa tylko przez jakiś czas. Skończyło się na tym.

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

To wyzywająco tworzy "blip", gdy stopka robi swoje. Hoever znalazłem, że około 98% czasu stopka pozostała na dole strony. Wszystkie inne poprawki i poprawki, które znalazłem i próbowałem, nie zawsze zostawiały stopkę na dole lub nie rozwiązywały problemu w pierwszej kolejności.

Mam nadzieję, że Apple wkrótce naprawi.

Odkryłem dokładnie zachowanie, które opisujesz w aplikacji na iPhone ' a, którą piszę. Ładuję kilka tekstu HTML z indeksem po prawej stronie. Po wybraniu elementu z menu i przewinięciu tekstu menu przestało odpowiadać (ponieważ strefa lądowania przewijała się spod niego). Zauważyłem również, że nawet mały przewijak tekstu przywróci menu indeksu.

Stworzyłem przypadek testowy i wgrałem tutaj Plik (jeśli wyświetlasz go w przeglądarce innej niż iPhone, zrób okno małe pionowo, aby zobaczyć poprawne zachowanie):

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

Zorientowałem się, że menu indeks przewijało się wraz z tekstem (nawet jeśli widoczne menu się nie poruszało) po tym, jak stuknąłem B, a następnie ponownie stuknąłem B. Zamiast przewijać do B (w zasadzie nie poruszając się), przewijało się do D.

Teraz utknąłem. Mam nadzieję, że uda mi się dodać jakiś kod JavaScript (nigdy nie programowałem w JavaScript, więc jest to mały problem), który przewija tekst o jeden piksel po uniesieniu palca z pozycji menu (i oczywiście po przewinięciu tekstu w wybrane miejsce). Może JavaScript może wykryć przewijanie, a następnie dodać kolejne przewijanie do tego.

W przypadku, gdy może komuś pomóc:

Miałem dokładnie ten sam problem, a mój kod wyglądał mniej więcej tak (jest to jednostronicowa webapp):

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

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

Inną odmianą rozwiązania jest zwiększenie rozmiaru szerokości dokumentu o 1px, a następnie natychmiastowe jego cofnięcie. Ma to tę zaletę, że nie tworzy więcej elementów i nie ma żadnego migotania, którego doświadczyłem.

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

Przykładowy kod

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