There are four main coordinate systems exposed via JavaScript (all in units of "CSS pixels"):

1. Page coordinates: (0,0) represents the top-left of the document.
2. Client coordinates: (0,0) represents the top-left of the view the page is laid out into, the "layout viewport".
3. Visual coordinates: (0,0) represents the top-left of what the user sees - the visual viewport
4. Screen coordinates: (0,0) represents the top-left of the user's physical screen

Red shows the client coordinates using position:fixed
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)