DOM Rectangle

DOM rectangle fingerprinting measures the precision and behavior of element geometry measurement APIs including getBoundingClientRect(), getClientRects(), offsetWidth, offsetHeight, clientWidth, clientHeight, scrollWidth, and scrollHeight. Different browser layout engines (Blink, Gecko, WebKit) calculate element dimensions with varying levels of precision and rounding behavior. The technique creates elements with specific CSS properties (fractional pixel dimensions, transforms, scaling) and measures their reported dimensions to many decimal places. For example, an element with width:'100.5px' might report exactly 100.5, 100.49999..., or 101 depending on browser rounding. Sub-pixel rendering implementations differ: some browsers use floating-point precision throughout the layout engine, others round at certain stages. CSS transforms (scale, rotate, skew) combined with measurements expose browser-specific matrix calculations. The DOMRect object's properties (x, y, width, height, top, right, bottom, left) are computed through different code paths in different engines. Testing elements at various zoom levels (browser zoom, devicePixelRatio) reveals rounding and scaling algorithms. Elements with CSS box-sizing, borders, padding, and margins have slightly different measurement behaviors across browsers. iframe dimensions, SVG element measurements, and ::before/::after pseudo-element dimensions add more measurement variations. The fingerprint captures hundreds of measurements across different element types and CSS configurations. Since layout engine code is deeply integrated into browser cores and optimized for performance, this fingerprint is extremely stable and nearly impossible to spoof without reimplementing entire layout engines.

• •Layout engine
• •Precision testing
• •Rendering differences