Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #41895
    Geri
    Member

    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

    #120500
    Andy Howells
    Participant

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

    #120501
    Geri
    Member

    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.

    #120502
    Andy Howells
    Participant

    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.

    #120503
    Geri
    Member

    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.

    #120511
    Geri
    Member

    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.

    #120512
    Geri
    Member

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.