document.contains does not work in IE 11

Bug report

Describe the bug

Using document.contains(...) does not work in IE 11.

An easy workaround is to use document.body.contains(...) instead, so it’s not such a big of a deal 😃

Anyways, it seems like the document object does not inherit the method specified on the Node prototype, thus causing the .contains(...) call to fail. So it’s possible that other calling other methods which document inherits from Node fails too…

To Reproduce

  const ref = useRef(null);
  useEffect(() => {
    console.log(document.body.contains(ref.current)); // works fine even in IE 11
    console.log(document.contains(ref.current)); // fails in IE 11
  }, []);

  return <div ref={ref} className="container"></div>;

1. Full repro at https://github.com/tomdohnal/document-contains-repro

Expected behavior

Using document.contains(...) should work even in IE 11.

System information

• OS: [Windows]
• Browser (if applies) [IE 11]
• Version of Next.js: [9.3, 9.4]
• Version of Node.js: not applicable…

[tomdohnal]

So, I tried to add the document.contains polyfill but it seems to be broken in IE11. So I created a pull request in their repository which fixes it https://github.com/ljharb/document.contains/pull/12.

Nonetheless, if we want to polyfill the document.contains behaviour we either need to wait for it to be merged or use our own fork of it.

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.