[Kanti]

Problem

Since the spotlight overlay is anchored to the document (#144), nothing updates its holes while scrolling. Sticky and fixed elements move within the document when the page scrolls, so after scrolling the overlay covers them and they cannot be clicked anymore, e.g. editable content in a sticky header. In 1.10.4, the holes followed the scrolling.

Implemented behavior

• A passive scroll listener recomputes the holes again, at most once per frame and without measuring the document.
• The holes of all other elements keep their document coordinates, so the overlay path is not rewritten for them. The holes are still recomputed on every scroll frame though, on every page, so scrolling runs script again, unlike after [BUGFIX] Fix spotlight overlay stutter on scroll #144. See the follow-up below.

Tests

• New spotlight-overlay.test.js (browser):
  • Highlighted sticky and fixed elements stay clickable after scrolling, while an element that is not highlighted stays blocked. This test fails without the fix.
  • Scrolling a page with only static targets does not rewrite the overlay path.
• npm run test: 91 passing, npm run lint

Follow-up

• [BUGFIX] Only follow scrolling for sticky and fixed spotlight targets #161 only recomputes the holes while scrolling when a target or one of its ancestors is sticky or fixed. Without such targets, scrolling runs no code again, as after [BUGFIX] Fix spotlight overlay stutter on scroll #144.
• [BUGFIX] Follow scrolling of inner containers in the spotlight #162 (draft) also follows scrolling of inner scroll containers.