I sized the background images for this blog based on view port size. There are sized versions for each breakpoint in order to reduce page load size- the 480x320 size saves more than 80k for the intial page load compared to the desktop version. I'm building the page this way with the smallest version of the image as the default and then selecting what is an "appropriate" size based on media queries. Each viewport size is a crop from the same background image so even when resizing the browser you aren't thrown too far off from the orginal perspective of the image. I used CSS to fix these backgrounds- this prevents the background image from scrolling which means that the image can be cropped to standard viewport sizes keeping file size lower. Also with the text overlaying the background in a semi opaque div it sort of keeps the context of the page in place. Well that's my intention anyway.

The unfortunate thing is that iOS- or at least the iPhone- does not respect the fixed background when you use the body tag. While iOS started supporting the background-attachment: fixed; (in version 5 if memory serves), what it doesn't let you do is use this property on the body. I suspect this has something to do with the scroll of the page, the current position of the viewport, and the touch property all in the mix but I have absolutely no research to back this up. The somewhat obvious solution to this is to add a div in the page structure that is position: fixed; and fills the entire page. The background image than can be applied to that div like so:

#background-image {
z-index: -1;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: 100%;
background-image: url("../../images/background_320.jpg");
background-attachment: fixed;
}

However this doesn't solve the problem entirely. When you go to scroll the first time on an iOS device this placeholder div moves with the page until the scroll stops and then snaps into position. It is as though the viewport itself is moving and then reorrients when the scroll is completed. To make things more curious this only happens on the first scroll- all subsequent scrolls work correctly.

The screen capture from the iOS emulator shows this behavior. The left image is during the scroll where the background image is moving verticaly. The right side shows the scroll stopped and the background snapping back into place.

There are a number of javascript solutions that are proclaimed to fix the fixed (heh) issue but this approach adds more code weight, maintability issues, and a really specific solution for a single browser which just feels... yucky.

Categories: DrupalPlanet Drupal