Get a free trial // 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):

    Full issue on stackoverflow below (sorry, I’m on iPad, have no intention to format my message).

    # 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]( 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 {
    top: 0px;
    left: 0px;
    bottom:0px; }

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed