Skip to content

Instantly share code, notes, and snippets.

@krukid
Created April 19, 2011 11:16
Show Gist options
  • Save krukid/927150 to your computer and use it in GitHub Desktop.
Save krukid/927150 to your computer and use it in GitHub Desktop.
safari5 dialog z-index bug minimal test case
<!DOCTYPE html>
<html>
<head>
<title>Safari5 Dialog Z-Index Bug</title>
<style type="text/css">
#overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 100;
background: black;
opacity: 0.3;
cursor: pointer;
}
#popup {
position: absolute;
left: 20%;
top: 20%;
z-index: 200;
padding: 30px;
background: white;
-webkit-box-shadow: 4px 4px 4px #000;
}
p.bold {
font-weight: bold;
}
</style>
</head>
<body style="background:red">
<div id="popup">
<input type="file"/>
</div>
<div id="overlay" onclick="alert('Overlay clicked!')">
</div>
<p class="bold">Click the overlay and try to close it.</p>
<p class="bold">Click the "choose" button and move your mouse over the dialog until you see a hand cursor, then try to click an item within the dialog.</p>
<p>
qwerty qwerty qwerty qwerty qwerty qwerty qwerty qwerty qwerty qwerty qwerty qwerty qwerty qwerty qwerty
qwerty qwerty qwerty qwerty qwerty qwerty qwerty qwerty qwerty qwerty qwerty qwerty qwerty qwerty qwerty
qwerty qwerty qwerty qwerty qwerty qwerty qwerty qwerty qwerty qwerty qwerty qwerty qwerty qwerty qwerty
</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment