Position/display of drop is incorrect on first open, but fine on subsequent opens

[lvl99]

I'm having an issue with the Drop being placed outside the visible area which requires the page to scroll to see the Drop (on mobile devices this is not good). Once scrolling, or hiding and reopening the Drop, it seems to correct itself. I had a look on the first open and the transformX value was greater than necessary. I've tried calling the Drop.position() method after opening (it is dynamic drop content too) but it doesn't solve my problem, so perhaps it is something to do with trying to get dimensions of hidden/zero-width elements.

Additionally some issues exist with positioning of CSS elements, such as the arrow, probably due to an incorrect translateX value being set on the first open. Have a look at this JS fiddle to see an example of first open with broken arrow, then close and reopen to see the arrow's position corrected: https://jsfiddle.net/lvl99/9txry81k/

First open:

Second open:

In the above example, when you open the Drop the first time the translateX is set to -16px. The second time it's opened the translateX value is set to 303px. I see too that on the first open the position value is set to fixed, and on subsequent opens it is set to absolute.

[lvl99]

Ok, maybe there's some other funny bits. Because it's in a fixed element I assume that's why it gets a position: fixed style set, but it seems to swap between fixed and absolute, and sometimes the Drop scrolls with the window.

[hekigan]

I do have the same problem.

• first click = the arrow is supposed to be on the left of the element but actually goes over it (an A tag)
• second click = the position is fixed