demo · v145

Popup placement math

An editor wants to open a colour-picker popup snapped to the right edge of its window — even when the parent is dragged to (840, 320) on the tablet's screen. That maths only works if screenX reports the truth. Before Chrome 145 on Android, it didn't.

screenX
—
screenY
—
outerWidth
—
outerHeight
—

The diagram shows your parent window (filled) and the popup that the snapping recipe would open at (screenX + outerWidth, screenY). Drag your browser window and refresh — the popup snaps with it on Chrome 145+; on older Android it sticks to the screen origin.

the placement recipe

// snap a popup to the right edge of the parent window
const popupX = window.screenX + window.outerWidth;
const popupY = window.screenY;

window.open(
  "/picker",
  "picker",
  `popup,width=320,height=480,left=${popupX},top=${popupY}`
);

On Chrome < 145 on Android the values were pinned to 0 — every popup opened from the top-left of the screen regardless of where the parent was. After 145, the placement matches the user's mental model of "next to this window".

see also