popover-link-component is "jumpy" on css fixed elements

[blimmer]

Because the popover-link-component is, by default, attached to the ember-application div, the experience is very strange when a popover is open and the user scrolls. Consider a dropdown in a fixed header, like this:

When the user scrolls and this popover is open, the popover scrolls off the screen and then 'snaps' back to the correct position. It would be great if you could attach the popover element to the header (so it inherits the fixed position and doesn't scroll offscreen), but rootElement doesn't work that way.

I've created a JSBin that shows this issue. Can anyone think of a fix for this use case?

[blimmer]

I had to come up with a solution to this in the short-term for my project. I posted a JSBin showing the hacky fix.

Basically, I extend the PopoverLinkComponent with a wrapper component. I then dynamically create an Ember.ContainerView to attach the popover element at the correct place in the DOM. The wrapper component is position: relative and the getOffset method is modified to use the jquery position() method to get its relative position (vs. offset() to get the offset relative to the whole document).

I think this is a potentially a good option to fix the fundamental problem I originally described, but it needs to be fleshed out a bit more. The supporting placement methods don't all work with using jQuery's position vs. offset call. I will try to continue updating this issue as I have time to figure all this out, but I wanted to post an interim option for other people experiencing this problem.

[ronco]

I've updated @blimmer's JSBin. This fixed an issue with correctIfOffscreen not working. The solution provided there should be a good starting point if there is interest in this solution.

[ronco]

Actually correctIfOffscreen wasn't working in the previous JSBin either. Here is a new one with a functional correctIfOffscreen in the use case @blimmer has provided

[ronco]

Scratch that. My latest JSBin still has issues. Will update if I mange to get it resolved.