CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.
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.
Search for Stuff
Browse the Archives
Get the Newsletter
... or get the RSS feed