Problem on IE11 and SVG

Hi and happy new year!

Issue

I have an issue with SVG circle, IE11 and tippy.js (which use popper.js): The tooltips don’t work. I have an alert message in the console: The object does not handle the property or method "contains": 649,3 which seems to be related with popper.js (the other warning message is related to tippy.js)

Do you think you could help me?

CodePen demo

https://codepen.io/Julien-Jolly/pen/pprydG

What is the expected behavior?

You should see and interact with the tooltip

What went wrong?

No tooltip at all 😢

Browser

IE11 on Windows 10 (work on Edge and Chrome, FF…)

[taltrui]

@FezVrasta Sorry for bringing up such an old issue, but I’ve found that contains is part of the HTMLDivElement prototype, so I think it is safer and maybe faster to use a that one instead:

if (!SVGElement.prototype.contains)  SVGElement.prototype.contains = HTMLDivElement.prototype.contains;

And you could add this polyfill in the code, since it won’t have any effect if contains is already present.

[FezVrasta]

It looks like IE11 doesn’t support the method “contains” on SVG nodes… I’m not surprised.

You may polyfill it:

SVGElement.prototype.contains = function contains(node) {
	if (!(0 in arguments)) {
		throw new TypeError('1 argument is required');
	}
 
	do {
		if (this === node) {
			return true;
		}
	} while (node = node && node.parentNode);
 
	return false;
};

Please let me know if it works.