'hidden' selector doesn't work for SVG images in Firefox

Reported by:	anonymous	Owned by:	mikesherov
Priority:	low	Milestone:	None
Component:	css	Version:	1.8.2
Keywords:		Cc:
Blocked by:		Blocking:

Description

The 'hidden' selector documentation at http://docs.jquery.com/Selectors/hidden

links to

http://docs.jquery.com/Release:jQuery_1.3.2#:visible.2F:hidden_Overhauled,

which says:

"if your element's CSS display is 'none' [...] then an element will be reported as hidden"

This sample code demonstrates that at least for SVG images in Firefox (tested on version 15.0.1), the selector does not function as described for CSS display:none.

As can be seen in the code, a workaround for this issue is to directly test the CSS "display" property, but it would be more convenient (and consistent) to use the selector.

I tested something closely resembling this code in Chrome and the selector worked correctly, but at the moment I'm at a different machine without access to Chrome, so I haven't run it against the code below.

I have no access to IE 9, so IE 9's a question mark.

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf8"/>

		<title>Firefox Test:  Using the 'hidden' selector with SVG</title>

		<style>
			.object
			{
				border: 1px solid #000;
			}

			.nodisplay
			{
				display: none;
			}
		</style>

		<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

		<script>
			function go()
			{
				// INCORRECT:  Firefox alerts paragraph1 only
				$(".object:hidden").each( function()
				{
					alert( ".object:hidden: " + $(this).attr("id") );
				});

				// INCORRECT:  Firefox alerts paragraph1 only
				$(".object").each( function()
				{
					if( $(this).is(":hidden") )
					{
						alert( "is(:hidden): " + $(this).attr("id") );
					}
				});

				// CORRECT:  Firefox alerts paragraph1 and circle1
				$(".object").each( function()
				{
					if( $(this).css("display") === "none" )
					{
						alert( "css: " + $(this).attr("id") );
					}
				});
			}
		</script>
	</head>

	<body>
		<button onclick="go();">click me</button>
		<p id="paragraph1" class="object nodisplay">paragraph 1</p>
		<p id="paragraph2" class="object">paragraph 2</p>

		<svg id="circle1" class="object nodisplay" xmlns="http://www.w3.org/2000/svg" version="1.1"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="blue"/></svg>
		<svg id="circle2" class="object" xmlns="http://www.w3.org/2000/svg" version="1.1"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="green"/></svg>
	</body>
</html>

Attachments (0)

Change History (7)

Changed September 21, 2012 02:45PM UTC by dmethvin comment:1

The referenced docs are very obsolete, and the release notes are from 2009. Everything in docs.jquery.com is on the verge of being removed or moved to other locations. Accurate documentation (or at least the docs intended to be accurate) can be found on http://api.jquery.com/hidden-selector/ .

We do not, in general, support DOM operations and tests on SVG. It's on our wontfix list. However, we sometimes can find cheap workarounds; I'll leave this open for discussion.

Changed September 21, 2012 02:52PM UTC by anonymous comment:2

Sorry, I didn't see the blurb about using jsfiddle.net

Fiddle: http://jsfiddle.net/xNgbq/1/

Changed September 23, 2012 03:10PM UTC by mikesherov comment:3

component:	unfiled → css
owner:	→ mikesherov
priority:	undecided → low
status:	new → assigned

I could theoretically fix this, but I'd like to discuss this with the team first. For now, I'll take the ticket on, but it may be closed without fixing.

Changed September 30, 2012 03:08AM UTC by mikesherov comment:4

https://github.com/jquery/jquery/pull/939

Changed September 30, 2012 10:25AM UTC by sindresorhus comment:5

Since the bug is in a pretty new version of Firefox, wouldn't it be better to convince them to fix the bug themselves?

Changed September 30, 2012 01:00PM UTC by mikesherov comment:6

sindresorhus, I plan on doing it myself, actually. :) However, there really is nothing in the SVG spec mentioning offsetWidth and offsetHeight, and I suspect this was a "conform to the spec" decision.

Changed October 03, 2012 12:56AM UTC by mikesherov comment:7

resolution:	→ wontfix
status:	assigned → closed

So, we debated the merits of this and decided that SVG is not something we plan on supporting just yet: https://github.com/jquery/jquery/pull/939

It's on our list of things we don't support: http://docs.jquery.com/Won't_Fix#SVG.2FXML.2FVML_Bugs

At some point in the future, we may support SVG, but until then, this is a wontfix. Thanks for contributing a great test case and feedback!

Side navigation

#12587 closed bug (wontfix)