Kevin Powell - Community•3mo ago

Y offset when toolbar is visible (Chrome Android only)

When the toolbar is visible, my circle's center's Y position is above the clip location by an amount that seems equal to the height of the toolbar. When the toolbar auto-hides during scroll, the circle's center is at the right place. It's only on Android, not on desktop even when enabling toolbar autohide.

const { clientX: x, clientY: y } = e as MouseEvent
const { clientWidth, clientHeight } = document.documentElement
const clipPath = [0, Math.hypot(Math.max(x, clientWidth - x), Math.max(y, clientHeight - y))].map(r => `circle(${r}px at ${x}px ${y}px)`)

await document.startViewTransition(async () => commit()).ready
await document.documentElement.animate({ clipPath }, {
  duration: 600,
  easing: 'ease-in',
  pseudoElement: '::view-transition-new(x-lightdark)',
}).finished

const { clientX: x, clientY: y } = e as MouseEvent
const { clientWidth, clientHeight } = document.documentElement
const clipPath = [0, Math.hypot(Math.max(x, clientWidth - x), Math.max(y, clientHeight - y))].map(r => `circle(${r}px at ${x}px ${y}px)`)

await document.startViewTransition(async () => commit()).ready
await document.documentElement.animate({ clipPath }, {
  duration: 600,
  easing: 'ease-in',
  pseudoElement: '::view-transition-new(x-lightdark)',
}).finished

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Y offset when toolbar is visible (Chrome Android only)