(beta) Unlocking by "hold" causes a transition glitch

[ildar170975]

Checklist:

• I updated to the latest version available
• I cleared the cache of my browser

Release with the issue: beta 2

Last working release (if known): 1.2.19

Browser and Operating System: Chrome 148.0.7778.97 & FF 150.0.2, Win10x64

Description of problem:

Consider a card with action: hold:

type: custom:restriction-card
card:
  type: entities
  title: xxx
  entities:
    - sun.sun
action: hold

When a "hold" action is performed:
-- a "tap" circular area is displayed (which is great),
-- a vertical scrollbar is shown for a moment, a whole view is shifted (which is BAD);
-- then it comes to normal.

Javascript errors shown in the web inspector (if applicable):

Additional information:

[ildar170975]

Seems to be related to actionHandler.startAnimation()...

[iantrich]

@claude take a look at this issue on the beta branch and see if you can fix it and submit a PR to resolve

[claude]

Claude finished @iantrich's task in 1m 53s —— View job • claude/issue-187-20260515-0352 • Create PR ➔

---

Fix for Issue #187: Hold action transition glitch

• Gather context and read repository files
• Understand the root cause of the hold action transition glitch
• Implement the fix
• Commit and push changes
• Create PR

---

Root cause: In src/action-handler-directive.ts, the action-handler-restriction ripple element was appended to document.body with position: 'absolute' and positioned using pageX/pageY (document-relative coordinates). When a hold gesture was triggered near the viewport edge, the element extended beyond the viewport boundary, causing the browser to momentarily expand the scroll area — producing the scrollbar flash and view shift.

Fix (2 changes in src/action-handler-directive.ts):

1. position: 'absolute' → position: 'fixed' — anchors the ripple to the viewport, not the document.
2. pageX/pageY → clientX/clientY — uses viewport-relative coordinates to match the fixed positioning.

|