Include zoom level in unlimted interactive graph calculations #3221
Include zoom level in unlimted interactive graph calculations #3221SonicScrewdriver wants to merge 5 commits intomainfrom
Conversation
🗄️ Schema Change: No Changes ✅ |
|
Size Change: +192 B (+0.04%) Total Size: 485 kB
ℹ️ View Unchanged
|
🛠️ Item Splitting: No Changes ✅ |
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (098f771) and published it to npm. You Example: pnpm add @khanacademy/perseus@PR3221If you are working in Khan Academy's frontend, you can run the below command. ./dev/tools/bump_perseus_version.ts -t PR3221If you are working in Khan Academy's webapp, you can run the below command. ./dev/tools/bump_perseus_version.js -t PR3221 |
…tion of zoom to support fontScaling on mobile.
SonicScrewdriver
changed the title
| * @param element - The DOM element to check for CSS zoom | ||
| * @returns The cumulative zoom factor (e.g., 1.5 for 150% zoom, 1.0 for no zoom) | ||
| */ | ||
| export function getCSSZoomFactor(element: Element): number { |
There was a problem hiding this comment.
I've kept this util in Interactive Graph for now, but I suppose it's possible that I could find instances where the zoom level is affecting the behaviour of other widgets on iOS.
If I find any such cases, I'll move this logic to a more central location. Until then, I think it makes sense here.
mark-fitzgerald
left a comment
mark-fitzgerald
left a comment
There was a problem hiding this comment.
Good find for the computed styling that impacts this widget!! I wonder if this could be used for Radio widget fade bars.
2 participants
Summary:
This PR fixes a bug related to our Mobile Application and our Interactive Graph Widgets.
The issue was that we're adding a zoom style in frontend based on the user's fontScale, in order to help support accessibility features on iOS. Unfortunately, this zoom affects coordinate calculations for click/touch events, as both clientX/clientY and getBoundingClientRect() return zoomed values, but the SVG coordinate system expects unzoomed pixel values. As a result, iOS users with increased fontSizes would find the position of points they add/drag to be inaccurate to their touch position.
In order to resolve that, I've added logic to calculate the cumulative zoom level. I chose to do it cumulatively, rather than finding a specific element, to help prevent future regressions. It seemed plausible that class names or hierarchy could be changed at some point in the future, and the cumulative approach allows us to remain platform agnostic. The calculations seemed fairly negligible, but I'm happy to adjust if anyone has any concerns about it!
Issue: LEMS-3258
Test plan: