| CARVIEW |
Select Language
HTTP/2 200
server: GitHub.com
content-type: text/html; charset=utf-8
last-modified: Fri, 28 Feb 2025 20:59:58 GMT
access-control-allow-origin: *
etag: W/"67c223ce-1251"
expires: Sun, 12 Oct 2025 22:45:39 GMT
cache-control: max-age=600
content-encoding: gzip
x-proxy-cache: MISS
x-github-request-id: 66E0:36702D:186B26:1DCDDC:68EC2D3A
accept-ranges: bytes
age: 0
date: Sun, 12 Oct 2025 22:35:39 GMT
via: 1.1 varnish
x-served-by: cache-bom-vanm7210098-BOM
x-cache: MISS
x-cache-hits: 0
x-timer: S1760308539.876352,VS0,VE300
vary: Accept-Encoding
x-fastly-request-id: 2191cb557312f5c0174f2b83274a9402a8e36e58
content-length: 1734
Input co-ordinate space test
There are four main coordinate systems exposed via JavaScript (all in units of "CSS pixels"):
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:
- 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)