0

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 (300x300 box nudged -100 to the right) in action (browse on an iPad, desktop just works fine): http://www.eppz.eu/responsive/offscreen.html

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<title>Off screen divs</title>
<style type="text/css">

    body
    {
        margin: 0px;
        width: 100%;
        overflow:hidden; /* Can't crop with this :( */

        background: url('tile.png');
    }

    #offScreen
    {
        width: 300px;
        height: 300px;
        margin-left: auto; /* To the right */

        position: relative;
        right: -100px; /* Nudge offscreen */

        background: url('300.png');
    }

</style>
</head>

<body>

    <div id="offScreen"></div>

</body>
</html>

I've inspected it on an iPad, computed style of body seems fine (width is 768px):

background-attachment: scroll;
background-clip: border-box;
background-color: 
rgba(0, 0, 0, 0);
background-image: url(http://eppz.eu/responsive/tile.png);
background-origin: padding-box;
display: block;
height: 300px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: hidden;
overflow-y: hidden;
width: 768px;

How to prevent safari from horizontal scrolling here? I'd prefer CSS only solutions, I have not much intention to "litter" markup.

3

Somewhy safari needs another wrapper introduced right after body, then everything works as expected. Something like:

#view
{
    position:relative;
    top: 0px;
    left: 0px;
    right:0px;
    bottom:0px;
}
2
  • 1
    I was pulling my hair out over this
    – Brenwell
    Jan 27, 2017 at 8:50
  • 1
    @Brenwell I did the same at that time between question and answer. :D Jan 27, 2017 at 20:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.