Translate viewport taps into the scaled stage's coordinates

Analysis

By Juliet Ramos, Playable Production Editor2 min read

View author profile
Translate viewport taps into the scaled stage's coordinates

Translate viewport taps into the scaled stage's coordinates. A runnable teaching fixture with synthetic cases, a broken branch, and explicit untested cells.

A tap can land on the visible target and still miss the game's hit test. This fixture reproduces the error caused by mixing viewport coordinates with an offset, scaled stage.

This edition is a laboratory fixture. Node and the companion HTML page execute the authored functions against synthetic cases. No physical device panel was run, no ad network reviewed the build, and no campaign result is inferred from a passing test.

What the documentation actually supplies

MDN: pointer coordinate is the governing reference for the browser primitive. MDN states that getBoundingClientRect returns an element's position relative to the viewport and includes its size, padding and border. Those measurements need a consistent relationship to the game's logical coordinate space. The fixture policy around that primitive is ours.

The failure the fixture isolates

The corrected branch subtracts the stage origin and divides by the declared scale. The broken branch uses the pointer's viewport coordinate directly. The fixture supplies a simplified rectangle and uniform scale; it does not model arbitrary CSS transforms, borders or nested scrolling.

The broken branch is retained so a producer can see the exact mistake, not only the repaired output.

Reference table
CaseInputExpected (fixed)Broken output
offset and doubled stage`[140,40,2]``50``140`
left edge`[30,30,0.5]``0``30`
unscaled origin`[25,0,1]``25``25`

All 3 fixed-branch cases matched the spec when executed in Node on 19 September 2026.

What a pass does not prove

A pass proves the inverse mapping for the supplied one-dimensional examples. A real hit test also needs the corresponding vertical mapping, a defined content rectangle and treatment of transformed ancestors. The central acceptance rule is that rendering and interaction agree on the same origin and scale.

Untested cells in this edition: physical devices, host SDKs, network packaging limits, store-opening callbacks, and campaign performance. Those remain empty on purpose.

Next check on a real build

Show the logical coordinates in a debug overlay while tapping known corners and the centre of an authorised build. Repeat after scrolling or resizing the host. If the canvas and hit regions use different scale factors, fix that shared contract before enlarging hit boxes to conceal the mismatch.

Open the runnable fixture to re-execute the cases in a browser. Download the case record to keep inputs, expectations and limits with a QA ticket.

Background in the archive: Playable ad device testing matrix and Playable spec sheet before you build. Those guides describe practice; they are not a substitute for this fixture and this check does not recertify their every claim.

Featured

Related posts

measurement

playable ads

·

1 min read

Playable completers vs video viewers: downstream payer quality

measurement

playable ads

·

3 min read

Stop simulation time while the document is hidden

measurement

playable ads

·

3 min read

Fit the whole playable stage inside a narrow viewport

measurement

playable ads

·

2 min read

Require both intersection and document visibility before advancing

More from the Measurement desk

measurement

·

2 min read

Airbridge adds Amazon Ads as an app measurement channel

measurement

·

2 min read

When to freeze a cohort for payback review (and when not to)

measurement

media buying

·

1 min read

Using predicted LTV in bids: disclosure checklist for the UA team

measurement

media buying

·

1 min read

Blended ROAS targets that hide channel failure in F2P portfolios