Position breaks when the reference has an SVG element directly inside

[diegohaz]

CodePen demo

https://codepen.io/anon/pen/djNawe

(remove the SVG element to see the difference)
(if you wrap the SVG in a div, it also works)

Steps to reproduce the problem

1. Put the popover inside its reference;
2. Make the reference absolutely positioned and give it some top and left values;
3. Put an SVG element inside the reference.

What is the expected behavior?

Removing the SVG element makes it work as expected:

What went wrong?

When it has an SVG element, it breaks:

Any other comments?

I'm trying to integrate Popper.js on my component library (https://reakit.io).

[piglovesyou]

I took a look. isOffsetContainer checks if #ref is an offset container by doing getOffsetParent(refEl.firstElementChild), but svgEl.offsetParent does not exist and it goes wrong.

This issue would be solved when we change getOffsetParent(refEl.firstElementChild) to something like getOffsetParent(getFirstValidOffsetContainee(refEl)), although I'm not sure if all children are invalid (= no .offsetParent). Text Node also doesn't have .offsetParent by the way.

The issued DOM tree FYI:

• #ref
  • svg
  • (text node)
  • #popper

I think getOffsetParent(getFirstValidOffsetContainee(refEl)) would be OK as long as we don't support a case of #ref > svg#popper.

[piglovesyou]

No, getOffsetParent itself has a functionality to skip and try the nextElementSibling. I'll try this.