Created
April 19, 2011 11:16
-
-
Save krukid/927150 to your computer and use it in GitHub Desktop.
safari5 dialog z-index bug minimal test case
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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