attachment: 'top right' only has the right position after first onResize()

[pubkey]

I created a tether between 2 elements with the following js:

new Tether({
  element: '#a1234',
  target: '#target',
  attachment: 'top right',
  targetAttachment: 'top left'
});

When the tether is created, the #a1234 is located to far left of the #target. But the moment I resize the window, the position gets fixed.

JS-Fiddle to reproduce.

Tested on Chrome and Firefox.

[TrevorBurnham]

That's very strange. I have no idea where that initial transformX value is coming from. 😕

[bgoerdt]

This is happening for me as well, only with a different combination of settings (attachment: 'bottom right', targetAttachment: 'bottom left'). I called position() on the tether object after I created it and it fixed the issue for now.

JSFiddle

[geotheory]

I've encountered the same problem. I have some code that resizes panels responsively, and I've found, strangely, that tether only works if I duplicate the code above and below the responsive code.

[cleverplatypus]

This is still happening.

Trying to tether a menu with the settings

new Tether({
    element: menuEl.value,
    target: selfEl.value,
    attachment: 'top right',
    targetAttachment: 'bottom right',
    offset: '-5px 0',
    constraints: [{
        to: 'body'
    }]
})

will render like this

Resizing the window seems to trigger positioning to the right, however the positioning is a bit haphazard.