cboxOverlay is displayed over #colorbox in above condition (The overlay is displayed over the content of colorbox).

Please see the screenshot.

I tried to create new XCode iOS project and placed only UIWebView. I load html bellow. (and I placed colorbox-master directory on the same directory.) After the app launched, I scrolled down about 1 screen height, then tapped 'Tap Here!!!'. Then the problem was reproduced.

This may be a bug of WebView of iOS9.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="colorbox-master/example1/colorbox.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="colorbox-master/jquery.colorbox.js"></script>
        <script>
            $(document).ready(function(){
                var container = $('.container');
                var p = $('p');

                for (var i = 0; i < 100; i++) {
                    container.append(p.clone());
                }

                $('a').colorbox();
            });
        </script>
    <head>
    <body>
        <div class='container'>
            <p>
                <a href="http://www.jacklmoore.com/colorbox/content/ohoopee1.jpg">Tap Here!!!</a>
            </p>
        </div>
    </body>
</html>

Sep 24 '15 13:09 sakairyota

I tried to change css https://github.com/jackmoore/colorbox/blob/master/example1/colorbox.css#L7 into

#cboxOverlay{position:absolute; width:100%; height:10000px;}

then overlay is displayed beneath the content.

(But, of course, if the height of page exceeded 10,000px, overlay is not shown below the border.

Sep 24 '15 13:09 sakairyota

I haven't tried to recreate your situation, but instead of doing this:

#cboxOverlay{position:absolute; width:100%; height:10000px;}

Maybe try this:

#cboxOverlay{position:fixed; width:100%; height:100%; z-index:9998;}

This moves the z-index one unit lower than the content window. This shouldn't be necessary since the content window should be inserted into the DOM after the overlay, meaning that it should be on top if their z-index is equivalent. I expect setting the z-index lower for the overlay will resolve it, rather than relying on DOM order.

Sep 26 '15 03:09 jackmoore

I tried z-index but it doesn't work. Overlay is still placed over the content.

Fixed position DOM may be placed over absolute position despite z-index or DOM order in this condition. I think this must be bug of UIWebView of iOS9.

To avoid this problem, some hack may be needed.

Sep 28 '15 08:09 sakairyota

According to https://medium.com/@designblooz/ios-9-css-bugs-on-uiwebview-73b19bf9bae7 , I added -webkit-transform and tried this, then problem is fixed. (I didn't change z-index or position of #cboxOverlay.)

#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}

I think this css has no side effect.

Sep 28 '15 08:09 sakairyota

#cboxOverlay is displayed over #colorbox when page is scrolled down in UIWebView on iOS9

cboxOverlay is displayed over #colorbox in above condition (The overlay is displayed over the content of colorbox).