Skip to main content

Bug Tracker

Side navigation

#10832 closed bug (fixed)

Opened November 18, 2011 06:25PM UTC

Closed May 29, 2012 12:00AM UTC

Last modified December 06, 2012 03:43AM UTC

jQuery.contains() fails with SVG elements in IE9 (includes solution)

Reported by: NinjaFish Owned by: timmywil
Priority: low Milestone: None
Component: selector Version: 1.7.1rc1
Keywords: Cc:
Blocked by: Blocking:

See for the initial discussion.

The currently implemented fallback strategy for jQuery.contains() fails when checking the state of SVG elements in IE9. This is because, while standard DOM elements in IE9 provide a native implementation for contains(), SVG elements do not. As the default result of contains() is "true", you end up with a situation where jQuery reports that two elements contain each other.

SVG elements in IE9 do provide an implementation of compareDocumentPosition(), which appears to provide the expected results. If the most-preferred implementation of contains() were allowed to fall back to compareDocumentPosition() on a per-element basis (rather than globally, as it does today), then jQuery.contains() should work in all cases in IE9.

The following jsFiddle demonstrates the problem and my solution:

The box should change from blue to red on mouseenter. This does not happen in IE9. You can uncomment the example override script to demonstrate the fix working as intended.

In my own copy of jQuery 1.7, I have changed the contains() implementation on line 5308 from this:

return a !== b && (a.contains ? a.contains(b) : true);

to this:

return a !== b && (a.contains 
	? a.contains(b) 
	: a.compareDocumentPosition 
		? !!(a.compareDocumentPosition(b) & 16) 
		: true);

This is the same implementation as used in the jsFiddle above, and borrows jQuery's existing compareDocumentPosition() implementation.

As far as I have seen, this is only an issue in IE9. All other browsers that I have looked at (Chrome, Firefox 3.x and 6+) work correctly both before and after the change.

Attachments (0)
Change History (4)

Changed November 18, 2011 08:46PM UTC by timmywil comment:1

component: unfiledselector
owner: → timmywil
priority: undecidedlow
status: newassigned

I think perhaps we could switch the contains method to use compareDocumentPosition first. This will be good to look at in the 1.8 Sizzle revamp. I was already looking at rewriting the contains method a bit.

Changed May 29, 2012 12:00AM UTC by timmywil comment:2

resolution: → fixed
status: assignedclosed

Changed December 05, 2012 05:18PM UTC by anonymous comment:3

Seems that the problem was re-introduced by the fix to

contains was changed to use the native contains and it is not available on the svg element.

Changed December 06, 2012 03:43AM UTC by Richard Gibson comment:4

Fix #10832 (this time with tests): jQuery.contains in SVG

Changeset: abe009cf263e2d3f29d96ad5abe5343922b11510