id,summary,reporter,owner,description,type,status,priority,milestone,component,version,resolution,keywords,cc,blocking,blockedby
10832,jQuery.contains() fails with SVG elements in IE9 (includes solution),NinjaFish,timmywil,"See http://forum.jquery.com/topic/1-6-2-broke-svg-hover-events 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: http://jsfiddle.net/NinjaFish/7pjCx/

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.",bug,closed,low,None,selector,1.7.1rc1,fixed,,,,