#1
  1. No Profile Picture
    The Monk that is Fat.
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    UK
    Posts
    107
    Rep Power
    19

    z-Index Overlay prevents interaction in Chrome and Safari


    This could have been posted in the DHTML forum, but I'm guessing the problem is with my CSS bits rather than the DHTML as such so I'm posting here.

    I've created a 'working' overlay for a page which has quite a bit of AJAX interaction. The connection the page will be used on is quite slow so I pop up a full screen table with 50% transparency to dim the main page, and the table has a box in the middle informing the user that the page is doing some work in the background.

    This works great in IE and FF, but in Chrome and Safari the overlay seems to be preventing any interaction with the pages WHEN IT IS HIDDEN.

    This is the correct/desired behaviour when the overlay is displayed - ie when the comms with the backed are happening I don't want the user to be able to push any other buttons or edit any other form elements - but when the layer is hidden (CSS = visibilty: hidden; display: none the layer still seems to prevent the user from clicking any of the controls (buttons, text fields, links etc).

    The reason I think it is the overlay layer doing this is that if I double click anywhere on the page, the area that 'working...' overlay displays in when it IS displayed becomes selected/highlighted.

    Is this a webkit oddity or am I doing something wrong?

    (To display the overlay I just switch the CSS of that particular DIV to "visibility: visible; display; block", but I have also tried "display: inherit;" and "display: inline;").

    Thanks,

    FM
    Last edited by fatmonk; August 20th, 2009 at 09:01 AM. Reason: Typos
  2. #2
  3. |<.+#f@#+.&.|
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2002
    Location
    norway
    Posts
    2,999
    Rep Power
    1228
    You need to show some code.

    In Safari you can right click any element and select inspect element to use the Web Inspector (a la Firebug for Firefox). This might give you some answers if you have conflicting code.
  4. #3
  5. No Profile Picture
    The Monk that is Fat.
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    UK
    Posts
    107
    Rep Power
    19
    I assume that on the Mac only as under XP the only right-click options I'm getting are Reload, View Source, Save Page As and View Source.


    Cheers,

    FM
  6. #4
  7. No Profile Picture
    The Monk that is Fat.
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    UK
    Posts
    107
    Rep Power
    19
    Oops, it's not enabled by default - switched it on now.

    It's not actually really telling me much though.. The web INspector is actually not showing me any info on any of the elements within the iFrame that the underlying controls are in.

    Maybe I need to play a bit more...
  8. #5
  9. Eager to learn
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2009
    Location
    Maryland, USA
    Posts
    2,223
    Rep Power
    2184
    Can you post a link to your site? www .yoursite. com/testpage.html

    Cheers
    "Quality of responses may vary. I reserve the right to change my mind for any reason what-so-ever without admitting I was wrong. I'd prefer to change your mind however, it's easier on my ego". - jwdonahue

    "so no-one has actually bothered to post an original quote ? what's wrong with making up your own?"
    - marnixR
  10. #6
  11. No Profile Picture
    The Monk that is Fat.
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    UK
    Posts
    107
    Rep Power
    19
    Affraid not, it's intranet...

    I'll try to put a snippet together tomorrow that I can post public to demonstrate the problem.

    Cheers,

    FM

    Comments on this post

    • Skipt agrees : thanks.
  12. #7
  13. No Profile Picture
    The Monk that is Fat.
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    UK
    Posts
    107
    Rep Power
    19
    While putting the demo scripts together I spotted something that was a possible culprit - and it turned out to be right.

    The main content frame that I couldn't interact with had a z-index of -1. That's why I couldn't get to it.

    Setting the z-index to 0 or more allows me to get to the control withot any problems in both Safari and Chrome.

    However, I also have another layer which is displayed under some circumstances. This layer has a z-index of 999 as I always want it to appear on top of my other content.

    The 999 layer appears on top of everything as expected in Chrome and Safari and FF, but below the content that I have just changed from -1 to 0 because of the above problem - that's obviously why I changed the z-index of that iframe in the first place...

    arrgghh. Fix one problem and create another.

    I'd hope I don't have to create cross-browser code to avoid this as the app will mostly (90+%) be used on IE - in fact probably 99+% on IE and FF - but I would like to be able to support Safari and Chrome if possible.

    I'll try to tweak the demo pages to show this new problem.

    -FM
  14. #8
  15. No Profile Picture
    The Monk that is Fat.
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    UK
    Posts
    107
    Rep Power
    19
    Right, here we go.

    Two code blocks to copy and paste into two files. Any edits (described below) to demonstrate the problems are to be done in the first file.

    To demonstrate the problems, save both files to the same dir and open the first file in each browser.

    File1: webkit_overlay_problem_main.html:
    Code:
    <html>
    <head>
    <META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
    <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
    <title>Webkit layer problem demo</title>
    <style type="text/css">
    body {background: #000000; margin: 0px; overflow: hidden;; font-family: Arial, Verdana; color: #FFF;} 
    .floater {  padding: 5px;
                position: absolute;
                left: 0;
                top: <?php echo $loggerDownShift+10 ?>;
                z-index: 999; position: fixed; bottom: 0; left: 0; float:right; text-align: left; 
              }
    .50pc     { filter:alpha(opacity=50); -moz-opacity:.50; opacity:.50;
              }
    .100pc    { filter:alpha(opacity=100); -moz-opacity:1.00; opacity:1.00;
              }
    
    <!--  SET z-index below TO -1 TO STOP INTERACTION under webkit, SET TO 1 TO SHOW SECOND OVERLAY PROBLEM -->
    .contentFrame { z-index: 1;             
                    position: absolute;
                    top: 55;
              }
    
    .secondOverlayStyle { border: 1px #bdbdbd solid;
                   font-size: 14pt; font-weight: bold; color: #ffffff; text-align: center;
                   background-color: #6e5a90; 
                   z-index: 999;}
    
    .hidden { visibility: hidden }
    .visible { visibility: visible }
    
    // For the 'working' overlay
    .transp_overlay {
    	background: #000;
    	margin: 0px;
    	padding: 0px;
    	filter:alpha(opacity=60); -moz-opacity:.60; opacity:.60;
      z-index: 999; position: fixed; bottom: 0; left: 0; 
    }
    div.rounded-box {
        position:relative;
        width: 9em;
        background-color: #FFF;
        margin: 3px;
        border: white thin solid;
        width: 250px;
    	  filter:alpha(opacity=75); -moz-opacity:.75; opacity:.75;
    }
    div.box-contents {
    	position: relative; 
      padding: 8px; 
      color:#000; 
      border: black 1px solid;
      font-size: 16px;
    	font-family: Arial; 
    }
    
    </style>
    
    <SCRIPT>
    function showWorking() {
      document.getElementById('working_overlay').style.visibility="visible";
    }
    
    function hideWorking() {
      document.getElementById('working_overlay').style.visibility="hidden";
    }
    
    function showHello() {
      document.getElementById('secondOverlayLayer').className='floater secondOverlayStyle 50pc visible';
    }
    
    function hideHello() {
      document.getElementById('secondOverlayLayer').className='secondOverlayStyle hidden';
    }
    
    </SCRIPT>
    
    </head>
    <body id="mainTopBody" bgcolor="#000">
    A menu appears here. Link and things work here.  
    Click <a href="#" onClick="showWorking(); return false;">here</a> to display the 'working' overlay, and <a href="#" onClick="hideWorking(); return false;">here</a> to remove it again.<br />
    Click <a href="#" onClick="showHello(); return false;">here</a> to display the 'HELLO' overlay, and <a href="#" onClick="hideHello(); return false;">here</a> to remove it again.<br />
    <div id="secondOverlayLayer" class="floater secondOverlayStyle 50pc hidden" onMouseOver="document.getElementById('secondOverlayLayer').className='floater 100pc';" onMouseOut="document.getElementById('secondOverlayLayer').className='floater 50pc';">&nbsp;
    <input size="6" class="secondOverlayStyle" type="text" id="secondOverlay" name="secondOverlay" value="HELLO" ></div> 
    <div id="working_overlay" class="hidden">
    <table width="100%" height="100%" cellpadding="0" bgcolor="#000000" style="	filter:alpha(opacity=50); -moz-opacity:.50; opacity:.50; z-index: 999; position: fixed; top: 0; left: 0;" cellspacing="0">
    <tr><td align="center" valign="center">
        <div class="rounded-box">
        <div class="box-contents">
            <table cellpadding="0" cellspacing="0"><tr>
            <td valign="center">&nbsp; <font size="+2" color="#000"><b>Working...</b></font><BR />&nbsp; <FONT SIZE="-1"><a href="#" onClick="hideWorking(); return false;">Click to hide again</a></FONT></td>
            </tr></table>
        </div> 
        </div>
    </td></tr></table>
    </div><br /> <br />
    <iframe align="center" scrolling="auto" class="contentFrame" name="loggerMain" id="loggerMain" src="webkit_overlay_problem_iframe.html" frameborder=0 height="100%" width="100%">
     
    </body>
    
    </html>
    File2: webkit_overlay_problem_iframe.html:
    Code:
    <html>
    <head>
    <title>Ascent Media | Discovery NE | Logger Viewer Menu</title>
    
    <style type="text/css">
    body { background: #FFF; background-position: center; color: #000; font-family: Arial Rounded MT Bold, Arial, verdana} 
    .titleLine { font-size: 16pt ; font-weight: bold; text-align: center}
    .subLine { font-size: 12pt ; font-weight: bold; text-align: center}
    </style>
    
    </head>
    
    <body>
    <script type='text/javascript'>
    <!--
    //Disable right click script III- By Renigade (renigade@mediaone.net)
    //For full source code, visit http://www.dynamicdrive.com
    var message="";
    function clickIE() {if (document.all) {(message);return false;}}
    function clickNS(e) {if 
    (document.layers||(document.getElementById&&!document.all)) {
    if (e.which==2||e.which==3) {(message);return false;}}}
    if (document.layers) 
    {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
    else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}
    document.oncontextmenu=new Function("return false")
    // --> 
    </script>
    
    <br />
    
     <br />
     
     
    <div class="titleLine">iFrame content<br />
    There is a hidden layer over this.<br />
    Use the links above to display the hidden layer<br />
    The buttons and controls below work in IE and FF but not in Safari or Chrome.<br />
    </div>   <br />
    <div class="subLine"><a href="#">I'm a link and I don't work</a> <br />
    <div class="subLine">Try the form buttons and things below - you can't click the buttons or enter the fields</div> <br />
    <FORM>
    <input type="text" name="something"><br />
    <input type="button" name="abutton" value="Try to Click Me"><br />
    <SELECT name="tryASelect">
    <OPTION>Option 1</option>
    <OPTION>Option 2</option>
    </SELECT>
    </FORM>
     
    </body>
    
    </html>
    To see the problems you should only need to change the z-index of .contentFrame in the first file (marked with a comment).

    The different browsers render this second layer in different places, but that's not a big issue (I actually always want the display to be top right of the screen, but am not fussed by that right now).

    What you see:

    In IE when the contentFrame z-index is set to >-1 the second layer display appears behind the contentFrame layer. You can see it peeping over at the top right of the screen.

    When the contentFrame z-index <0 you cannot interact with anything in the contentFrame in Chrome or Safari.

    Phew, I think that explains it.

    Apologies for poor code (it's chopped from a bigger set of stuff to simplify the demo, and tweaked to make more sense in the naming of things without the rest of the stuff being there) and apologies for not uploading somewhere (I don't have easy access to a public server from work). Posting the code like this should make it easier for someone to hack aroudn with it though.

    Cheers,

    FM

IMN logo majestic logo threadwatch logo seochat tools logo