foundation-apps icon indicating copy to clipboard operation
foundation-apps copied to clipboard

Suggestion: iOS "overflow scroll" and the HTML element

Open HoldenCreative opened this issue 8 years ago • 0 comments

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.

HoldenCreative avatar Apr 05 '16 12:04 HoldenCreative