Shadowbox shows at top of page, not at scrolled position on iPad Safari browser [#1030724]

There is a full discussion of this at http://shadowbox-js.1309102.n2.nabble.com/IPad-safari-browser-td4713039....
From my testing the shadowbox did not work at all on iPad, but I certainly experienced this issue on iPhone. Both on 4.2.1 software.

Apparently the solution is below

Shadowbox.init({ 
        handleOversize: "resize", 
        onOpen: function() { 
                if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.match(/iPad/i))) { 
                        $("#sb-container").css("top", $(window).scrollTop()); 
                        $(window).bind('scroll', function() { 
                                $("#sb-container").css("top", $(window).scrollTop()); 
                        }); 
                } 
        }, 
        onClose: function() { 
                if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.match(/iPad/i))) { 
                        $(window).unbind('scroll'); 
                } 
        } 
});

Comment	File	Size	Author
#1	fix_positioning_of_shadowbox_on_iOS_devices-shadowbox.patch	1.97 KB	grafikchaos

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

grafikchaos CreditAttribution: grafikchaos commented 18 August 2011 at 21:06

File	Size
fix_positioning_of_shadowbox_on_iOS_devices-shadowbox.patch	1.97 KB

Here's a patch to the shadowbox.module file to allow iPad and iPhone devices to properly display the shadowbox within the viewport. I don't have an Android tablet or phone so there's room for improvement

Comment #2

crispinbailey CreditAttribution: crispinbailey commented 3 October 2011 at 01:39

The above patch helps address the viewport issue for iPhones/iPads as long as you're not trying to hide the browser bar on page load.

There's still a gap appearing at the bottom of the screen/viewport when hiding Mobile Safari's browser bar using either of the following methods:

<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);"></body>

or...

 <script type="application/x-javascript">
addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);

function hideURLbar(){
window.scrollTo(0,1);
}
</script>

Any ideas? I've tried to fix it with CSS but haven't had any luck yet.

Comment #3

crispinbailey CreditAttribution: crispinbailey commented 1 November 2011 at 01:34

Re: my previous comment, now I'm not sure I wasn't hallucinating when I wrote it because I swore the provided patch helped at the time but it's not working for me now. I'm still seeing the gap at the bottom of the viewport if/when shadowbox is triggered after scrolling down the page. Works fine otherwise.