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.