1892262 - The digits inside the input fields for OTP verification are misplaced at zoom.us

Status: VERIFIED FIXED

(Core :: Layout: Text and Fonts, defect, P3)

Description

[Raul Bucata]

Attachment: Screenshot_1.png

Environment:
Operating system: Android 12/ Android 13
Firefox version: Firefox Nightly 127.0a1 (2016015791-🦎127.0a1-20240418095314🦎)

Preconditions:
Clean profile
OTP verification active

Steps to reproduce:

1. Navigate to: https://us04web.zoom.us/signin#/login
2. Proceed with the account login process
3. Once prompted with the OTP verification process, introduce any digits inside the fields.
4. Observe the digits inside the fields.

Expected Behavior:
The digits are correctly displayed inside the input fields

Actual Behavior:
The digits are misplaced

Notes:

• Reproducible regardless of the status of ETP
• Reproducible on the latest build of Firefox Nightly
• Works as expected using Chrome and Firefox Release
• Attachment provided
• Issue found during WebCompat team [Top100] websites testing

Comment 1

[Dennis Schubert [:denschub]]

Tom, can you find the regressor here?

Comment 2

[Daniel Holbert [:dholbert]]

I can repro on desktop as well (using the sign-up-for-a-new-zoom-account process, which starts out with a request for an email address to which they send an OTP).

Regression range:
https://hg.mozilla.org/integration/autoland/rev/7acc4ef7877f
--> regression from Bug 1891446 "Experimentally enable symmetrical letter-spacing in Nightly builds."

The bug goes away if you set about:config pref layout.css.letter-spacing.model to 0.

Zoom is trying to make it look visually like it's got 6 distinct input textfields boxes, but in fact it's 6 divs with rounded corners, with a single input textfield overlaying them, and they're using large letter-spacing values (among other things) to precisely place each character. (And with the new letter-spacing behavior from bug 1891446, this naturally results in the glyphs being placed further-to-the-right than Zoom's design is expecting.)

Comment 3

[Daniel Holbert [:dholbert]]

Given that the feature in question is NIghtly-only, release versions will always be unaffected/disabled and Nightly will always be affected (until/unless we change the implementation, or change our minds about what channels this behavior should be enabled on).

So "status-firefox127: affected" is correct for the moment, but it'll be "disabled" for that version number when v127 moves to beta.

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase 1 (reduced)

Comment 5

[Jonathan Kew [:jfkthame]]

In principle, their design is rather fragile, in that it assumes a "standard" width for the monospaced digits.

Given their use of font-family: Menlo,Monaco,Courier New,monospace;, most Windows and Mac users will get one of the named fonts -- unless they've disabled the use_document_fonts pref -- but on Linux and Android things will be a bit less reliable. I guess most Android devices will have Noto Sans Mono as their monospaced font, and that'll be OK, but there could be a bit more variety on Linux. They'll generally get away with it because most common monospaced fonts have pretty close to the same spacing. But if a user has configured their monospace font to be an unusually wide or narrow design, they could get similarly misaligned digits.

If we had the additional trim option suggested for letter-spacing in the discussion at https://github.com/w3c/csswg-drafts/issues/10193#issuecomment-2060325909, that would presumably resolve the issue, but at present that's just a tentative idea (and I suspect presents significant implementation challenges).

Comment 6

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #3)

So "status-firefox127: affected" is correct for the moment, but it'll be "disabled" for that version number when v127 moves to beta.

--> making that change, now that 127 is in beta.

Comment 7

[Daniel Holbert [:dholbert]]

Probably makes sense to classify this as a Gecko bug (like similar bug 1892432), given that the breakage here was due to a (experimental) Gecko change.

Comment 8

[Jonathan Kew [:jfkthame]]

The most recent CSSWG discussion agreed that symmetrical letter-spacing is an improvement, but should additionally be trimmed at line edges to maintain expected edge alignment.

Applying such trimming at line-start will fix the rendering of this example, and likewise for the "BBB icons" example in bug 1892432. I have a patch for this which I'll post here.

Ideally, we should also trim at line-end, but that has much less risk of being a real-world compat issue (we haven't had any such reports filed, AFAIK). I'll file a followup about that aspect.

Comment 9

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1892262 - Trim leading letter-spacing before the first character at start of line. r=#layout

This fixes cases like the Zoom OTP input "fields".

Comment 11

[BugBot [:suhaib / :marco/ :calixte]]

The severity field for this bug is set to S4. However, the following bug duplicate has higher severity:

• Bug 1892432: S3

:jfkthame, could you consider increasing the severity of this bug to S3?

For more information, please visit BugBot documentation.

Comment 12

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1892262 - Trim leading letter-spacing at start of line. r=#layout

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/68b9e9dadfac
Trim leading letter-spacing at start of line. r=layout-reviewers,dholbert

Comment 14

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/46923 for changes under testing/web-platform/tests

Comment 15

[pstanciu]

https://hg.mozilla.org/mozilla-central/rev/68b9e9dadfac

Comment 16

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 17

[Raul Bucata]

Verified this issue and could not reproduce it on Firefox Nightly and Release, on both Desktop and Mobile. The digits inside the OTP field are not misplaced, for both the sign-in and sign-up process.

Tested with:

Browser / Version: Firefox Nightly 130.0a1 (2024-07-08) (64-bit) / Firefox 127.0.2
Operating System: Windows 10 PRO x64

Tested with:

Browser / Version: Firefox Release 127.0.2 (2016028743-🦎127.0.2-20240624183754🦎)/ Firefox Nightly 130.0a1 (2016031439-🦎130.0a1-20240708220117🦎)
Operating System: Google Pixel 3 (Android 12) -1080 x 2160 pixels, 18:9 ratio (~443 ppi density)
Operating System: Oppo Find X5 (Android 13) - 1080 x 2400 pixels, 20:9 ratio (~402 ppi density)

Comment 18

[Raul Bucata]

Attachment: Untitled.png