I have some offscreen divs (to be moved in later with transform) on a full width page, but iOS safari (on the actual device) just don’t crop it, instead it extends the scrollable area.
You can see this setup (300×300 box nudged -100 to the right) in action (browse on an iPad, desktop just works fine): http://www.eppz.eu/responsive/offscreen.html
Full issue on stackoverflow below (sorry, I’m on iPad, have no intention to format my message).
For me it’s displaying on desktop too. I assume you mean the overlay style box in the top right.
Ya, if you see the code, it is a 300x300px box nudged -100px to the right (not completely off-screen).
But desktop “crops” the content right, without any horizontal scroll, while iOS safari shows it as a whole.
I’ve edited the original post, thanks.
Hmm. I made a [codepen](http://codepen.io/andyunleashed/pen/ihgAC) of the problem. I tried setting an absolute position on the overlay div, but still not working as expected on iOS.
Definitely a weird one.
Whoa, thanks for taking your time. Don’t know how to work this around.
A bunch of my planned behaviour would be based on sliding divs from offscreen, so actually I’m stuck here.
Adding a wrapper around all the content seems solving the problem. Not working when I add wrapping styles to body.
Seems the body tag in iOS Safari is processed in a wierd/special way. Would be great if you have some more information on this, though, the original question is solved.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".