zurb / foundation-apps

The first front-end framework created for developing fully responsive web apps.
http://foundation.zurb.com/apps
MIT License
1.58k stars 217 forks source link

Suggestion: iOS "overflow scroll" and the HTML element #803

Open HoldenCreative opened 8 years ago

HoldenCreative commented 8 years ago

Hello and thanks for an awesome framework as always.

I'd like to suggest adding "position: fixed" to the HTML root element by default as a method to counter the overflow-scrolling behaviour experienced on iOS.

On an iOS touch device, the default overscroll behaviour will allow a menu-bar to be dragged out of position temporarily. The root overscroll can also create a number of secondary issues when scrolling in-page overflow content. In some contexts, scrolling to the bottom of the overflow content may trigger the HTML overflow scroll "bounce" behaviour.

I tried a number of techniques to stop the behaviour including overflow: hidden rules on HTML and body, JS methods like http://stackoverflow.com/questions/10546857/disable-ios-overscroll-but-allow-body-scrolling and a few github repos. The only consistent solution I found that did not create additional secondary issues was use of position: fixed on the html tag.

I'm unsure if there may be potential performance issues from use of position:fixed (I haven't seen any here) or if there may be other negatives? If not, I'd like to suggest adding position:fixed and backface-visibility: hidden; as a default style on the html tag.