srobbin/jquery-backstretch — Issue #71: Fixed issue for long body content on Iphone
Author: headegg
Created: 2011-10-14 10:01:02+00:00
State: open

Hi Mr. Scrobbin,

First of all thanks a lot for your script.

We experienced an issue with image size on iPhone when there is a long page content.

Here is how we fixed it :
(i 'm sure there is a cleaner way to script it)

function _adjustBG(fn) {
try {
bgCSS = {left: 0, top: 0}
bgWidth = rootElement.width();
bgHeight = bgWidth / imgRatio;

// Make adjustments based on image ratio
// Note: Offset code provided by Peter Baker (http://ptrbkr.com/). Thanks, Peter!
if(bgHeight >= rootElement.height()) {
bgOffset = (bgHeight - rootElement.height()) /2;
if(settings.centeredY) $.extend(bgCSS, {top: "-" + bgOffset + "px"});
}
else
{
// FIXED By default get the height rom rootElement
var tmp_height = rootElement.height();

// FIXED But for iPhone get the height from window
if("onorientationchange" in window)
{
tmp_height = $(window).height();
}

// here is your code
bgHeight = tmp_height;
bgWidth = bgHeight * imgRatio;
bgOffset = (bgWidth - rootElement.width()) / 2;

// FIXED when landscape mode we compute the size from the width and not from the height
if(("onorientationchange" in window) && (window.orientation == 90 || window.orientation == -90))
{
bgWidth = rootElement.width();
bgHeight = bgWidth / imgRatio;
bgOffset = (bgWidth - rootElement.width()) / 2;
}

if(settings.centeredX) $.extend(bgCSS, {left: "-" + bgOffset + "px"});
}

$("#backstretch img").width( bgWidth ).height( bgHeight ).css(bgCSS);
} catch(err) {
// IE7 seems to trigger _adjustBG before the image is loaded.
// This try/catch block is a hack to let it fail gracefully.
}

// Executed the passed in function, if necessary
if (typeof fn == "function") fn();
}