Bug Tracker

Opened 7 years ago

Closed 7 years ago

#12587 closed bug (wontfix)

'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>

Change History (7)

comment:1 Changed 7 years ago by dmethvin

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.

comment:2 Changed 7 years ago by anonymous

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

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

comment:3 Changed 7 years ago by mikesherov

Component: unfiledcss
Owner: set to mikesherov
Priority: undecidedlow
Status: newassigned

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.

comment:5 Changed 7 years ago by sindresorhus

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

comment:6 Changed 7 years ago by mikesherov

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.

comment:7 Changed 7 years ago by mikesherov

Resolution: wontfix
Status: assignedclosed

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!

Note: See TracTickets for help on using tickets.