Code-server: Disable "scroll-bounce" on Safari

[sh0rez]

Coder already works surprisingly well on the iPad, however it is really annoying to scroll in the editor, because Safari applies the "end-of-page" effect to the whole application and moves it upwards.

According to the Internet, this effect can be disabled with some CSS:

• https://www.bram.us/2016/05/02/prevent-overscroll-bounce-in-ios-mobilesafari-pure-css/
• https://stackoverflow.com/questions/7768269/ipad-safari-disable-scrolling-and-bounce-effect
• https://stackoverflow.com/questions/8150191/disable-elastic-scrolling-in-safari

This would really improve the mobile experience on this device.

Thanks!

[sr229]

@sh0rez v2 should practically fix this, can you try this out?

[sh0rez]

Yes! I will try and let you know!

[sh0rez]

@sr229 I can confirm that this works now as expected! This is awesome!

[damianobarbati]

@sr229 how is code-server preventing the tedious behaviour on safari?
Can you please link me the relevant css/jss in the repository?

I'd like to learn how to fix this in my full-screen web applications 🙏🏼

[sh0rez]

I'm not sure how code-server does it (not a developer of this project), but maybe my search results from above help you?

According to the Internet, this effect can be disabled with some CSS:

• https://www.bram.us/2016/05/02/prevent-overscroll-bounce-in-ios-mobilesafari-pure-css/
• https://stackoverflow.com/questions/7768269/ipad-safari-disable-scrolling-and-bounce-effect
• https://stackoverflow.com/questions/8150191/disable-elastic-scrolling-in-safari

[jens1101]

@damianobarbati I think these lines in /src/browser/pages/global.css prevent the over-scroll behaviour:

html,
body,
#root {
  height: 100%;
  width: 100%;
}

body {
  /* ... */
  overflow: hidden;
}

I also suggest reading this article, which helped me figure this problem out.