I need a CSS (or any other) solution for preventing my page from scrolling and bouncing vertically in Safari on iPhone. The page is very simple. Nothing is to be scrolled there, but there’s an image to be swiped over and the only thing I want to do is record all coordinates of the touch events, from start, through each move, all the way to end. This part works well on Chrome and Firefox on Android, but on an iPhone I can’t get rid of the bouncing rubber band effect when dragging my finger over the image.
Here’s the page.
It draws the coordinates of the touch events continuously. In future versions the coordinates are sent to a robot playing an instrument similar to the one in the image.
I’ve found lots of solutions to similar problems, but they seem to deal with pages with several sections, some to be scrollable, which makes it all too complicated. I need a simple solution with only the two elements, the image and the info field showing the coordinates. On an Android the page works perfectly, on a Safari it doesn’t.
It’s most likely something you can fix with the CSS property overflow.
More info here: MDN Docs - overflow.
Having said that there are known issues with overflow properties not working on <body> on mobile. To make it work you may have to wrap all elements in <body> with a <div>, then style that <div> with overflow: hidden;.
Good luck!