Mobile Webkit reflow problem

Jak na ironię, moja oryginalna poprawka reflow (powiązana z pytaniem) działa teraz również w mojej prawdziwej aplikacji. Umieszczenie jego wariantu tutaj w przypadku jest przydatne dla kogokolwiek innego. Może być wywołana na dowolnym elemencie kontenera, lub jeśli nic nie zostanie przekazane, przepłynie cały dokument.

var forceReflow = function(elem){
    elem = elem || document.documentElement;

    // force a reflow by increasing size 1px
    var width = elem.style.width,
        px = elem.offsetWidth+1;

    elem.style.width = px+'px';

    setTimeout(function(){
        // undo resize, unfortunately forces another reflow
        elem.style.width = width;
        elem = null;
    }, 0);
};

Fajne w tym jest to, że nie wymaga tworzenia / dodawania / usuwania elementów, tylko poprawiania kontenera.

Moja instalacja iWebInspector jest dość zepsuty teraz, ale po bałagan wokół z jsfiddle i iOS sim wydaje się, że Twoje przeczucie jest poprawne-pomimo pozycji: stałe, przeglądarka myśli, że strona przewijała, i wkręca się cele kliknięcia.

Wygląda na to, że jest to ten sam problem co iOS Safari: kotwice w elemencie o stałej pozycji działają tylko raz , co również nie zostało rozwiązane za pomocą czystego CSS. Również powiązane: stała pozycja navbar tylko klikalne raz w Mobile Safari na iOS5.

Stycznie, a jestem pewien, że już to zauważono, nie można przewijać lewej strony, więc na iPhonie indeks pokazuje tylko A-M.

Wygląda na to, że jest to znany błąd :

Podstawowy problem polega na tym, że jeśli strona porusza się programowo (tzn. użytkownik nie spowodował przewijania) elementy wewnątrz elementu fix są niedostępne.

Użyj pozycjonowania bezwzględnego, Zmień znaczniki lub użyj jednego z obejść hybrydowych .

Oto odmiana obejścia McKamey ' a. Pozwala uniknąć dwukrotnego ponownego napełniania i może pomóc w migotaniu (w zależności od aplikacji): {]}

setTimeout(function(){
    document.body.style.borderBottom = 
        document.body.style.borderBottom === 'none' ? '1px solid white' : 'none';
}, 0);

Uważam, że jest to lepsze i osiąga ten sam efekt, pozwalając na klikanie linków w stopkach stałych. W jakiś sposób ukrywanie urlbara powoduje, że linki w stałej stopce nie są klikalne, dopóki nie przewiniesz trochę. Widziałem to też podczas ustawiania ostrości i dołączam obsługę zdarzeń do wszystkich zdarzeń ostrości, aby również to odpalić. Robię to z dojo, aby dołączyć wydarzenia.

        if(navigator.userAgent.match(/iPhone/i)){
        /* The famous iOS can't-click-links until touch fix, I attach onfocus */
            query('input,textarea,select', this.domNode).on('focus', function(el){
                document.documentElement.style.paddingRight = '1px';
                setTimeout(function () {
                document.documentElement.style.paddingRight = '';
                }, 0);
            });
        }