[Radio] Address a bug in Safari that causes the fade zone to partially overlay choice content#3644
[Radio] Address a bug in Safari that causes the fade zone to partially overlay choice content#3644mark-fitzgerald wants to merge 3 commits into
Conversation
…Radio] Address a bug in Safari that causes the fade zone to partially overlay choice content
…tyling to account for the zoom property that is applied in the iOS app when users have their font size display smaller than normal.
|
Size Change: 0 B Total Size: 505 kB ℹ️ View Unchanged
|
npm Snapshot: PublishedGood news!! We've packaged up the latest commit from this PR (9947ea4) and published it to npm. You Example: pnpm add @khanacademy/perseus@PR3644If you are working in Khan Academy's frontend, you can run the below command. ./dev/tools/bump_perseus_version.ts -t PR3644If you are working in Khan Academy's webapp, you can run the below command. ./dev/tools/bump_perseus_version.js -t PR3644 |
…ing thickness (use REM). Add a note to the fade area styling to explain the use of the mobile font scale variable.
handeyeco
left a comment
handeyeco
left a comment
There was a problem hiding this comment.
I'm going to have to trust you on this one.
| Also, in order to account for text direction, the direction is flipped when in RTL mode. | ||
| NOTE: The variable --mobile-font-scale is set by Frontend in | ||
| libs/mobile-app-integration/src/font-scale.tsxlibs/mobile-app-integration/src/font-scale.tsx. | ||
| It is used here to account for a bug in Safari that incorrectly calculates the width of elements |
There was a problem hiding this comment.
Does Safari have public bug tracking? Just wondering if there should be a link to it so that we know when we can remove the workaround.
There was a problem hiding this comment.
I would like to do that, but this is a long standing bug that isn't seeing any real activity on it because Webkit/Safari is in the process of rewriting zoom support for the new CSSWG standards. They have deprioritized working on any tickets that involve this bug. Many of the tickets get marked as "resolved" as a result. Let me know if you would like an alternative note to explain the bug status.
| calc( | ||
| var(--perseus-multiple-choice-content-margin) + | ||
| (var(--perseus-multiple-choice-spacing) / 2) | ||
| var(--mobile-font-scale, 1) * |
There was a problem hiding this comment.
Cool, didn't realize var had a fallback.
2 participants
Summary:
There is a bug in Safari that causes it to miscalculate/misreport the width of an element when it (or an ancestor) has
zoomapplied to it. This caused display issues with the Radio widget involving the horizontal scroll fade area (the fade would partially overlap the content). This PR includes the scale value being applied with thezoomproperty, as set in Frontend (PR is forthcoming).NOTE: This PR relies upon a change in Frontend to work (PR #11403). This change in Perseus has a fallback for when the CSS variable is not in place (it's only there when in mobile on iOS), so there is no failure in normal web pages.
Issue: LEMS-4147
Test plan (local dev only):
?embedded=1&fontScale=0.8Affected UI:
Before
After