Tech 14. Apr. 2015

Overflow-x makes scrolling choppy at mobile

I don’t know exactly why but at mobile devices often the content width is larger than the screen width which leads to a ugly horizontal scrollig. This is easy to fix by adding a

overflow-x: hidden;

to a wrapper.

I tried to add it to html and body - the curious ting is, that leads to a choppy scrolling at mobile devices. Setting to only one wrapper - I did it on body - everything is fine.

body {
	overflow-x: hidden;
}

By the way: For -webkit-overflow-scrolling: touch; I could see no effect.

See more here as well: http://stackoverflow.com/questions/12845892/ios-overflow-x-or-position-absolute-makes-scrolling-choppy

I don’t know exactly why but at mobile devices often the content width is larger than the screen width which leads to a ugly horizontal scrollig. This is easy to fix by adding a

overflow-x: hidden;

to a wrapper.

I tried to add it to html and body - the curious ting is, that leads to a choppy scrolling at mobile devices. Setting to only one wrapper - I did it on body - everything is fine.

body {
	overflow-x: hidden;
}

By the way: For -webkit-overflow-scrolling: touch; I could see no effect.

See more here as well: http://stackoverflow.com/questions/12845892/ios-overflow-x-or-position-absolute-makes-scrolling-choppy