IOS8 Safari -webkit-overflow-scrolling: touch; question

Question

So, we are creating this web application for a client that worked perfectly on iOS7 in Safari. But when we tested the app in iOS8, it had huge bugs.

• If the user opens the sidebar and closes it, the content located in <section style="overlay-y: scroll;"></section> disappears (the overlay).
• Some buttons have stopped working for some reason. ( <a href="">Lala</a> )

When we remove -webkit-overflow-scrolling: touch; from the container (div that contains all the content), everything works flawlessly, as it were ...

Any ideas on what this could be?

Answer 1

I have the same problem! So far I can’t find the right solution, but there is nothing more than an ideal solution:

Assuming #container has a set of -webkit-overflow-scrolling: touch properties, this jQuery should help you:

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

Or for javascript (untested):

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

This will disable smooth roulette-style scrolling on the page. Therefore, it is not perfect, but your page should scroll correctly.

Edit:

Some further research led us to find a more hacky way to solve this problem, while maintaining smooth touch scrolling. Assuming you have -webkit-overflow-scrolling: touch somewhere in css, you can “switch” it to your JS. I'm not sure what you have that shows / hides the menu, but hopefully you can use this.

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

This did not work for me without setTimeout. Hope this can help you or someone else.

Answer 2

I had problems in iOS8 that all my buttons bound to the click event do not work correctly. In general, we will be delayed for 300 ms, but in some cases I will need to press more than two times to call it.

So, I also found this solution that works on mine. Adding a touchhend with a click.

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

You can see the forum they were discussing here.

JavaScript touchhend versus click dilemma

I hope this help.

Answer 3

Is your sidebar an animated CSS animation by accident?

I had the same error in a Cordoba web application. After some experimentation, I found that the problem was caused by the parent <div> (sidebar), which is animated using css animation and has the animation-fill-mode: forwards;

Removing this property solved the problem and restored the expected behavior of -webkit-overflow-scrolling: touch

Answer 4

I answer:

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

The previous solution did not work:

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