CODEWITHSUNDEEP
htmlioscss
Krijn Rijshouwer
Krijn Rijshouwer

Reputation: 113

iOS8 Safari -webkit-overflow-scrolling: touch; issue

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.

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?

Upvotes: 10

Views: 12590

Answers (4)

Doctor Equis
Doctor Equis

Reputation: 1

My answer is:

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

Previous solution didn't work:

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

Upvotes: -1

clauderic
clauderic

Reputation: 61

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

Upvotes: 0

Prakarangs
Prakarangs

Reputation: 49

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.

Upvotes: 0

Alex
Alex

Reputation: 1038

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.

Upvotes: 16

Related Questions