Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
sakairyota opened this issue Sep 24, 2015 · 4 comments
Open

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

sakairyota opened this issue Sep 24, 2015 · 4 comments

Comments

@sakairyota
Copy link
Contributor

Environment:

  • colorbox version: 1.6.3
  • iOS 9 (iOS 8 is good)
  • Displayed in UIWebView (Safari displays correctly)
  • UIWebView is scrolled down about 1 screen height.

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>

img_0249
@sakairyota
Copy link
Contributor Author

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.

@jackmoore
Copy link
Owner

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.

@sakairyota
Copy link
Contributor Author

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.

@sakairyota
Copy link
Contributor Author

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.

sakairyota added a commit to sakairyota/colorbox that referenced this issue Sep 28, 2015
@sakairyota
Fix issue jackmoore#753, iOS9 UIWebView probrem
1430e00 
Fix the broblem that #cboxOverlay is displayed over #colorbox
when page is scrolled down in UIWebView on iOS9.
To avoid UIWebView's probrem, add translate3d(0,0,0) to related element.
jackmoore added a commit that referenced this issue Sep 28, 2015
@jackmoore
Merge pull request #754 from sakairyota/ios9webview
d657c2c 
Fix issue #753, iOS9 UIWebView probrem
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jackmoore @sakairyota