- Page coordinates: (0,0) represents the top-left of the document.
- Client coordinates: (0,0) represents the top-left of the view the page is laid out into, the "layout viewport".
- Visual coordinates: (0,0) represents the top-left of what the user sees - the visual viewport
- Screen coordinates: (0,0) represents the top-left of the user's physical screen
Blue shows the page coordinates using position:absolute
Purple takes the client coordinates, adjusts them by the layout viewport position (documentElement.getBoundingClientRect) and shows the result relative to the page using position:absolute
These three should work reliably virtually everywhere (except that position:fixed behaves strangely in Safari under pinch zoom)
Green attempts to map the screen co-ordinates onto the page but relies on heuristics to try to convert it to position:fixed values. Known sources of error mapping screen co-ordinates to client co-ordinates include:
- When embedded in an iframe, the frame's offset from the window
- Pinch zoom / browser zoom scale
- On mobile, the offset of the context in the screen (top controls, OS heading, etc.) and changes there to
- Any reserved space at the bottom of the window (eg. developer tools)
- Mobile (but not desktop) Safari uses device pixels instead of CSS pixels (fails to divide by the divicePixelRatio)