hiding divs with negative margins on ipad

Question

I have an animation on ipad things go from -200px to 1500px and are hidden in a browser with overflow-x:hidden.

When I look on ipad I can scroll "off screen" and see the hidden items even though the body and html and set to width:100% and height:100%.

How can I fix this in ipad?

Answer 1

You might use media querys for the Ipad Viewport.

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* STYLES GO HERE */}

Answer 2

You could try to put the animation in a div that is not wider than the screen. Then apply overflow:hidden; on that div.

Answer 3

Try like this:

html, body {
   position:relative;
}