tether icon indicating copy to clipboard operation
tether copied to clipboard

Wrong position when html element has offset and target is position fixed

Open adamschwartz opened this issue 9 years ago • 1 comments

Repro steps:

  1. Visit http://github.hubspot.com/drop/docs/welcome/
  2. Open the console and apply position: relative; top: 100px to the html element. screen shot 2015-09-02 at 2 27 20 pm
  3. Next apply position: fixed; top: 100px; left: 100px to a.drop-example-theme-social-sharing (“Share” button) screen shot 2015-09-02 at 2 29 12 pm
  4. Finally, click the Share button and scroll the page. Observe that the positioning is off.

What I believe is going on is that the fixed positioning of the target prevents it from being affected by the top: 100px set on html. However, the values used to calculate the positioning of the Drop element (by Tether) are unnecessarily taking these values into account.

cc: @zackbloom

adamschwartz avatar Sep 02 '15 18:09 adamschwartz

I am also encountering the same issue, however, I am using:

html { height: calc(100vh - 50px); }

I actually removed the offset and I am still seeing a 'jump' when the main content scrolls. Click Here to see it in action.

TroutZen avatar Aug 03 '16 00:08 TroutZen