tether icon indicating copy to clipboard operation
tether copied to clipboard

Element position 'absolute' when attached to 'fixed' target

Open vitto32 opened this issue 9 years ago • 2 comments

I'm using a target with 'position : fixed' but I've noticed something strange on element positioning. I'd expect the element position to be always fixed (as far as the target is) but:

  • when I enable it, tether sets the element position to 'absolute'
  • if I scroll the body position changes to 'fixed' (after a short while)
  • if I resize the window (or disable/enable) the position changes back to 'absolute'

On some browsers (IE, Edge, Safari) this is noticeable and annoying. It happens also on tether.io in the examples with "click to show".

vitto32 avatar Sep 21 '16 15:09 vitto32

The problem affects mobile browsers too (tested on Safari iPad). Page scroll affects element position. This should not happen when all the involved objects (target and constraints) have fixed position, am I wrong?

vitto32 avatar Sep 28 '16 09:09 vitto32

All right, it seems there are 2 different problems:

  1. the move function should use fixed positioning when the target or one of his parents has fixed positioning. This fixes the problem on IE & Firefox and partially on iOS.
  2. on iOS getBoundingClientRect returns incorrect values during scrolling and resizing (when orientation is changed or navigation bar is shrank) if the target has fixed positioning. This can be solved debouncing the position function in such edge cases.

vitto32 avatar Oct 03 '16 08:10 vitto32