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?

Improve this question
1

4 Answers 4

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Good to hear. Hopefully Apple and/or the webkit people know about this issue.
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. :)
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.
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.

Improve this answer

Comments

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

Improve this answer

Comments

-1

My answer is:

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

Previous solution didn't work:

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

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.