10

So we are building this web app for a client which worked perfectly on iOS7 in Safari. But when we checked the app out in iOS8 it had a some huge bugs.

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

When we remove -webkit-overflow-scrolling: touch; from the container ( the div that holds all the content ) everything works flawlessly like it used to...

Any ideas on what it might be?

Krijn Rijshouwer
  • 113
  • 1
  • 1
  • 9
  • possible duplicate of [Iframe scrolling iOS 8](http://stackoverflow.com/questions/26046373/iframe-scrolling-ios-8) – TylerH Nov 04 '14 at 15:35

4 Answers4

16

I'm having this same issue! So far I can't find a true solution, but there is a less-than-ideal workaround:

Assuming #container has the -webkit-overflow-scrolling: touch property set, this jQuery should help you out:

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

Or for javascript (untested):

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

This will disable the smooth roulette-style scrolling on the page. So it's not ideal, but your page should scroll correctly now.

Edit:

Some further research led to our discovery of a more hacky way to resolve this while keeping the smooth touch scrolling working. Assuming you have -webkit-overflow-scrolling: touch somewhere in the css, you can "toggle" it within your JS. I'm not sure what you have that shows/hides the menu, but hopefully you can utilize this.

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

    //...Existing code

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

This didn't work for me without the setTimeout. Hope this can help you or someone else out.

Community
  • 1
  • 1
Alex
  • 978
  • 7
  • 23
  • Good to hear. Hopefully Apple and/or the webkit people know about this issue. – Alex Nov 05 '14 at 15:21
  • For me that option does not work. I wanna try to avoid and code the fix with js. The content of my container get's a similar behaviour when its parent elements have position absolute or relative. Without that positioning the smooth scrolling works fine. Will appreciate that this would be discuss further. :) – bzin Jan 28 '15 at 16:17
  • So far I've stuck with this solution, and haven't tried anything using just css. Someone elsewhere mentioned using `transform3d(0,0,0)` but that didn't work for me. You might want to give that a try. Sorry I couldn't be more help. This is hopefully a temporary fix until Apple resolves the problem themselves. – Alex Jan 28 '15 at 16:53
  • Thanks for this great answer, saved my bacon! – quickdraw mcgraw Dec 09 '15 at 10:31
0

I had this problems in iOS8 that all my buttons binded to click event are not working properly. In general we will have 300 ms delayed but at some points i will need to press more than couple of times to get it triggered.

So i also found this solution which works on mine. Adding touchend with click.

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

You can see the forum they discussed here.

JavaScript touchend versus click dilemma

I hope this help.

Community
  • 1
  • 1
Prakarangs
  • 49
  • 4
0

Is your sidebar animated with CSS animations by any chance?

I had the same bug in a Cordova web app. After some experimenting, I found that the problem was caused by parent <div> (the sidebar) that was being animated through css animations and had the property animation-fill-mode: forwards;

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

clauderic
  • 61
  • 1
  • 2
-1

My answer is:

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

Previous solution didn't work:

document.getElementById('container').style.webkitOverflowScrolling = 'auto';
userlond
  • 3,632
  • 2
  • 36
  • 53
Doctor Equis
  • 1