tether
tether copied to clipboard
Wrong position when html element has offset and target is position fixed
Repro steps:
- Visit http://github.hubspot.com/drop/docs/welcome/
- Open the console and apply
position: relative; top: 100px
to thehtml
element. - Next apply
position: fixed; top: 100px; left: 100px
toa.drop-example-theme-social-sharing
(“Share” button) - 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
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.