Safari iOS8 -webkit-przepełnienie-przewijanie: dotknięcie; Wydanie

Question

Budujemy więc tę aplikację internetową dla klienta, który działał doskonale na iOS7 w Safari. Ale kiedy sprawdziliśmy aplikację w iOS8, miała ona kilka ogromnych błędów.

• Jeśli użytkownik otwiera i zamyka go w ramce, treści, który jest w <section style="overlay-y: scroll;"></section> znika (część pokrył).
• Niektóre przyciski przestały działać z jakiegokolwiek powodu. (<a href="">Lala</a>)

Gdy usuwamy -webkit-overflow-scrolling: touch; z pojemnika (div, które posiada wszystkie treści) wszystko działa bez zarzutu tak jak kiedyś ...

Wszelkie pomysły co to może być?

Answer 1

Mam ten sam problem! Do tej pory nie mogę znaleźć prawdziwe rozwiązanie, ale jest mniej niż idealne obejście:

ZakładająC#container definiuje posiada zestaw -webkit-overflow-scrolling: touch właściwość ta jQuery powinno pomóc:

$('#container').css('-webkit-overflow-scrolling','auto'); 

Or dla javascript (untested):

document.getElementById('container').style.webkitOverflowScrolling = 'auto'; 

Spowoduje to wyłączenie płynnego przewijania w ruletkę na stronie. Więc nie jest idealny, ale twoja strona powinna teraz poprawnie przewijać.

Edit:

Niektóre dalsze badania doprowadziły do ​​odkrycia naszej bardziej hacky sposób aby rozwiązać ten problem przy zachowaniu płynnego przewijania dotykowego pracy. Zakładając, że masz -webkit-overflow-scrolling: touch gdzieś w css, możesz "przełączyć" go w swoim JS. Nie jestem pewien, co masz, że pokazuje/ukrywa menu, ale mam nadzieję, że możesz to wykorzystać.

function toggleMenu(){ 
    $('#container').css('-webkit-overflow-scrolling','auto'); 

    //...Existing code 

    setTimeout(function() { 
     $('#container').css('-webkit-overflow-scrolling','touch'); 
    },500); 
} 

To nie działa dla mnie bez setTimeout. Mam nadzieję, że to może pomóc tobie lub komuś innemu.

Answer 2

Miałem problemy z iOS8, że wszystkie moje przyciski powiązane ze zdarzeniem kliknięcia nie działają poprawnie. Generalnie będziemy mieli opóźnienie o 300 ms, ale w niektórych punktach trzeba będzie nacisnąć więcej niż kilka razy, aby go wyzwolić.

Więc znalazłem również to rozwiązanie, które działa na moje. Dodawanie touchend za pomocą kliknięcia.

button.on('click touchend', function(event) { 
    // this fires twice on touch devices 
}); 

Możesz zobaczyć forum, które omówili tutaj.

JavaScript touchend versus click dilemma

Mam nadzieję, że to pomoże.

Answer 3

Czy Twój pasek boczny jest animowany z animacjami CSS przez przypadek?

Miałem ten sam błąd w internetowej aplikacji Cordova.Po pewnym eksperymentowanie, okazało się, że problem został spowodowany przez rodzica <div> (na pasku bocznym), który był animowany przez animacji CSS i miał właściwość animation-fill-mode: forwards;

Usuwanie ta właściwość rozwiązał problem i przywrócił oczekiwanego -webkit-overflow-scrolling: touch zachowanie

Answer 4

Moja odpowiedź brzmi:

$('#container').css('-webkit-overflow-scrolling','auto'); 

Poprzednie rozwiązanie nie działa:

document.getElementById('container').style.webkitOverflowScrolling = 'auto';