Manual repositioning causes drop to disappear

[brianmhunt]

The following seems to cause the drop to disappear:

drop.tether.position()

It requires some almost indescribable finagling to get the drop back.

Presuming the issue is apparent I would be grateful for any thoughts on what might be happening here. I am happy to provide more details, too.

Cheers

[zackbloom]

This could be an issue with a rendering glitch based on how we're using CSS transforms. A test case in jsfiddle or the like would be very much appreciated.

[brianmhunt]

I have put together a jsFiddle, but first a couple side issues I noted. This might be peculiar to jsFiddle or I might be doing something wrong, but I thought to share.

As you can see from the fiddle I am creating a drop like this (where #X and #Y are DOM elements):

target = $("#Y")
template = $("#X")

drop = new Drop({
      target: target.get(0),
      classes: DROP_THEME,
      content: template.html(),
      position: "bottom center",
      openOn: 'hover',
})

target.on("click", function () {
    $(drop.dropContent).find(".list-group-item").first().remove()
    drop.tether.position()
    return false // preventDefault; stopPropagation
})

When I run this the Drop does not seem to respect the arguments position and openOn. The Drop always appears in the top center and always opens and closes on both hover and click events (not just hover). I just thought to point this out since it just didn't seem like the intended behaviour. In any case it is a separate problem from the issue at hand.

I worked around the above and found the issue to reproduce by setting the position to top center and openOn to null, as in this second jsFiddle. It is still not consistently reproducible, but it definitely exhibits if you fiddle with it enough (pardon the pun).

If you keep clicking the Drop button it will remove items from the drop contents' internal list, and you can click "Reset" to add them all back in. For me when the list of items gets to around 2-3 the drop will sometimes disappear. It seems to reappear on scrolling.

In my own application (i.e. not the contrived example here) it does not always reappear on scrolling, and it also does not respond to drop.open() or drop.toggle(), so it may not be exactly the same issue - but it seems pretty close and a good place to start. 😀

[adamschwartz]

After looking at the second jsFiddle, I believe this is most likely a positioning bug in Tether. When I played with it, at 3 items remaining the Drop was positioned to translateY(-1700px) (off screen to the top). @zackbloom thoughts?

[zackbloom]

This illustrates the problem: http://jsfiddle.net/3bNE5/1/ vs http://jsfiddle.net/3bNE5/2/

The mistake is assuming that the body would act like a position: relative container by default. It turns out it makes the viewport act like the container. Adding position: relative to the body fixes your example, but I'm still thinking about how to fix this in tether.

[zackbloom]

This should do it: shipshapecode/tether#31

[brianmhunt]

Looks good - here is an updated jsFiddle with @zackbloom's patch.