- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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).
http://stackoverflow.com/questions/14254559/how-to-crop-offscreen-div-in-ios-safari-on-actual-device
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.
.frame {
position:relative;
top: 0px;
left: 0px;
right:0px;
bottom:0px; }