:visible/:hidden selectors unreliable #2227
Description
Issue
This issue is present in both version 1 and 2 of jQuery.
It is happening on inline elements wrapping block elements, which is valid in HTML5, such as a header and an image wrapped in a single anchor.
Two issues arise:
- Different browsers report offsetWidth/Height of the anchor differently. For example Firefox would report one visible anchor in the example below, and Chrome will report 0. This also highly depends on the CSS styles applied, as on the page where this issue was discovered missing images are not displayed at all instead of the common missing image icon.
- While a browser may report an anchor as invisible, child elements are still visible and clickable as they inherit anchor properties.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
<a href=#>
<h1>Header</h1>
</a>
<script>
$(function () {
alert('Visible anchors: ' + $('a:visible').length);
})
</script>
</body>
</html>Solution
There are 2 potential solutions that come to mind, but each has flaws
- Loop through child elements and check each for visibility. Potentially harmful for performance, although the selector is already marked as such in the documentation.
- Check parent for visibility. Probably not enough on its own, as it will report incorrectly, if anchor doesn't have visible children.