Ticket #9667 (closed bug: wontfix)
jQuery .css can't read z-index value on Webkit browsers
| Reported by: | RAMilewski | Owned by: | |
|---|---|---|---|
| Priority: | low | Milestone: | 1.next |
| Component: | css | Version: | 1.6.1 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
jQuery("#X").css("z-index"); always returns "auto" on Webkit browsers. Works ok on Firefox.
It also appears that you can't set the z-index with something like: jQuery("#X").css("z-index",5);
Test case follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery CSS Z-index Fail</title>
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#X").css("z-index",5);
$("#Y").append($("#X").css("z-index"));
});
</script>
<style type="text/css">
h1 {z-index: 3;}
</style>
</head>
<body>
<h1 id="X">Some Text</h1>
<div id="Y"> Z-index is: </div>
</body>
</html>
A more complex test case can be found at http://netfools.com/anaglyph/
Change History
comment:2 Changed 23 months ago by timmywil
- Priority changed from undecided to low
- Resolution set to wontfix
- Status changed from new to closed
- Component changed from unfiled to css
I understand it being confusing that the computed z-index is auto when you've specifically set one with .css, but RAMilewski makes a good point that computed z-index will be different in different browsers. We could lie (in a sense) and say that what was set is being applied so that return values are consistent, or users can realize that the z-index will not be applied without setting the other styles to make z-index work. I'm closing wontfix as I suspect this will not be something we will change, but if anyone disagrees, we can reopen in the future.
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
This bug should be marked invalid.
This is not a jQuery problem. Webkit browsers will not return the z-index value specified in style sheets unless the element is also positioned.
h1: {
}
fixes the problem