Ticket #1349 (closed bug: fixed)
.is(':visible') is incorrect when parent element is hidden
| Reported by: | arrix | Owned by: | john |
|---|---|---|---|
| Priority: | major | Milestone: | 1.3.2 |
| Component: | selector | Version: | 1.3.1 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
What should the :visible test return when the parent element is hidden(display: none)?
The result in safari is different from that in other major browsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>.is(':visible')</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div style="display:none">
<div id="div1"></div>
</div>
<script type="text/javascript">
alert($('#div1').is(':visible'));
</script>
</body>
</html>
IE: true Firefox: true Opera: true Safari: false Webkit nightly: false
This inconsistency also affects methods using .filter(':visible') such as .hide().
Change History
comment:2 Changed 6 years ago by brandon
The solution to this issue is best dealt with on a case by case basis because of the performance hit. One would need to walk up the DOM tree and check the parents for visibility in Safari.
comment:5 Changed 6 years ago by john
Fixed in SVN rev [2518-2519].
comment:7 Changed 6 years ago by harking
- Status changed from closed to reopened
- Resolution fixed deleted
This bug/feature causes another issue when using the .resizeable() function of jQuery.ui
If the parent div is display:none, then
$('#div1').resizeable({ proportionallyResize: ['div'] });
On resize the internal div is incorrectly resized. This is due to an incorrect assumption that when $(an_element).is(':visible') returns true, $(an_element) has an outterWidth and outterHeight. See http://dev.jquery.com/browser/tags/1.2.1/src/core.js#L647
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
It isn't jquery's fault. It is caused by that in safari window.getComputedStyle($('#div1')[0]).display == 'none'. The behavior of .is(':visible') in safari is correct conceptually. But I think, for most of programmers, the behavior in firefox/opera/ie is more desired.