Grow your CSS skills. Land your dream job.

How to “crop” offscreen div in iOS safari (on actual device)?

  • # January 10, 2013 at 5:04 am

    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

    # January 10, 2013 at 5:22 am

    For me it’s displaying on desktop too. I assume you mean the overlay style box in the top right.

    # January 10, 2013 at 5:31 am

    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.

    # January 10, 2013 at 5:58 am

    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.

    # January 10, 2013 at 6:03 am

    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.

    # January 10, 2013 at 8:15 am

    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.

    # January 10, 2013 at 8:17 am

    .frame {
    position:relative;
    top: 0px;
    left: 0px;
    right:0px;
    bottom:0px; }

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".