Khan / Khan/live-editor

Pointer Lock and Wheel Events don't work well together

Open
#745 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
776
Forks
180
PR merge metrics
No merged PRs in 30d

Description

There appears to be some weird event shenanigans going on in the live editor. When the pointer is locked to the canvas, and its theoretical position passes outside the canvas, wheel events can no longer be canceled to prevent the page from scrolling. This seems to be worse in Chrome, but occasionally happens in Firefox as well.

To reproduce, visit [this demo](https://www.khanacademy.org/computer-programming/onwheel-bug/6640319063605248) and click the canvas to lock the pointer. Test to see that scrolling is disabled. Then move the pointer (red dot) off the edge of the canvas and scroll again. The page will move.

To test if this was a browser bug or KA bug, I downloaded the page source and ran it in a file. Most of the page scripts failed to load, and the bug was no longer present, so I assume that means it's being caused by some JS running on the page. If you think I should report this on the Chromium bug tracker instead, let me know.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the linked onwheel-bug demo in Chrome and Firefox, then inspect the live editor's pointer-lock and wheel-event handling. Done means wheel events remain cancelable and the page does not scroll when the locked pointer moves beyond the canvas.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.