fix(web): ios popup positioning and style #6383

mcdurdin · 2022-03-16T00:31:32Z

Fixes #5929.
Fixes #6381.

This fixes four separate issues with the longpress popups and key previews:

The key preview was offset by a couple of pixels (unreported issue).
The background 'shim' did not cover the key caps, which caused them to look startlingly white when the rest of the background greyed down (bug(web): longpress menus blend into underlying keyboard #5929).
The popup menu was incorrectly wrapping to two rows due to sizing model mismatches (bug(web): longpress popup has incorrect shape #6381).
The popup menu would be realigned incorrectly for the in-app keyboard, when moving it to keep it in the keyboard area (bug(web): longpress menus blend into underlying keyboard #5929).

Longpress iOS (Chrome simulation):

Key preview iOS (Chrome simulation):

User Testing

We need to verify the behaviour of the longpress menu and the key preview. If possible, capture screenshots of both of these elements when running the tests, so we can compare.
Suggest using sil_euro_latin keyboard for this test, as it has many big longpress menus.
Test single-row long presses, such as long-press m, and multi-row, such as long-press g or e.

TEST_IOS: Verify that the in-app keyboard and system keyboard both display longpress menus and key previews correctly. Note that the longpress menu will be constrained to fit within the keyboard area on iOS, due to limitations with iOS system keyboards. Please test on iPhone 13 Pro and iPhone SE. Consider other devices also. Please test with 4 and 5 row keyboards.
TEST_ANDROID: Verify that the in-app keyboard and system keyboard both display longpress menus and key previews correctly.
TEST_WEB_IOS: Verify that the web keyboard in unminified/testing, on an iOS simulator or device, displays longpress menus and key previews correctly. Please test on iPhone 13 Pro and iPhone SE. Consider other devices also. Please test with 4 and 5 row keyboards.
TEST_WEB_ANDROID: Verify that the web keyboard in unminified/testing, on an Android emulator or device, displays longpress menus and key previews correctly.

Fixes #5929. Fixes #6381. This fixes four separate issues with the longpress popups and key previews: 1. The key preview was offset by a couple of pixels (unreported issue). 2. The background 'shim' did not cover the key caps, which caused them to look startlingly white when the rest of the background greyed down (#5929). 3. The popup menu was incorrectly wrapping to two rows due to sizing model mismatches (#6381). 4. The popup menu would be realigned incorrectly for the in-app keyboard, when moving it to keep it in the keyboard area (#5929).

keymanapp-test-bot · 2022-03-16T00:31:37Z

User Test Results

Test specification and instructions

✅ TEST_IOS (PASSED): ): I am comfortable with going ahead with that very minor artifact. Thank you for your attention to detail 😁
✅ TEST_ANDROID (PASSED): Round 2 passed on Pixel 2 emulator with Android API 29 (notes)
✅ TEST_WEB_IOS (PASSED): Tested this in Unminified page on iPhone 13 Pro Simulator and it seems to be working as expected. (notes)
✅ TEST_WEB_ANDROID (PASSED): Re-tested this on Android emulator (API 30) in Unminified Page and it seems to be working as expected. (notes)

Test Artifacts

darcywong00 · 2022-03-16T01:22:14Z

Test Results

TEST_ANDROID (PASSED): Popup and longpress keys appear normal
Tested on Pixel 2 emulator with Android API 29

In-app popup key

In-app longpress keys

System popup key

System longpress keys

bharanidharanj · 2022-03-16T07:34:11Z

TEST_IOS (PASSED): Tested on iOS 15.2 Simulator and it is working as expected.

In-App Key Preview

System Keyboard Key Preview

In-App Key Long Press (single row)

In-App Key Long Press (multiple rows)

System Keyboard Long Press (single row)

System Keyboard Long Press (multiple rows)

bharanidharanj · 2022-03-16T07:53:43Z

TEST_WEB_ANDROID (PASSED): Tested this on Android Emulator (API 29 - Version 10.0) and it is working as expected.

Key Preview - Unminfied Page

Long Press Single Row - Unminified Page

Long Press Multiple Rows - Unminified Page

bharanidharanj · 2022-03-16T08:17:09Z

TEST_WEB_IOS (PASSED): Tested this on iOS 15.2 Simulator in the Keyman Web page and it is working as expected.

Key Preview - Unminified Page

Long Press - Single row -Unminified Page

Long Press - Multiple rows - Unminified Page

mcdurdin · 2022-03-16T18:27:49Z

Hmm, the positioning is certainly better than before. But it doesn't look quite right on KeymanWeb in iOS and Keyman for iOS. So will have another round.

Note that the problem is that Safari's CSS is diverging from Chrome here. I haven't identified what is triggering the difference yet.

Key Preview, Keyman for iOS

Longpress, Keyman for iOS

Key Preview, KeymanWeb on Safari / iOS

Longpress, KeymanWeb on Safari / iOS

Final issue: some keys are misaligned, only in Safari, not in Chrome:

Font size adjustment needed an override for the key preview to prevent it using the base key font size as a starting point.

On Safari, some keys were vertically misaligned, due to different default vertical-align.

Adjusts calculations for key preview and ensures we use box-sizing: content-box in all circumstances, to make it consistent across all platforms.

Adjusts positioning calculations for longpress popups and corresponding styles to make it consistent across all platforms, particularly iOS.

mcdurdin · 2022-03-16T23:23:03Z

So I've done another round of tweaks to the positioning to try and get it working better. I have tested locally on my test build with Chrome on Windows (emulation and in developer frame), and in Safari on iOS, but not yet in iOS app.

But this sadly means retesting everything, so sorry @bharanidharanj and @darcywong00! The screenshots were very helpful, please keep them coming.

@keymanapp-test-bot retest all

darcywong00 · 2022-03-17T01:04:03Z

TEST_ANDROID (PASSED): Round 2 passed on Pixel 2 emulator with Android API 29

inapp keyboard - popup

inapp keyboard - longpress

system keyboard - popup

system keyboard - longpress

bharanidharanj · 2022-03-18T12:28:44Z

TEST_WEB_ANDROID (PASSED): Re-tested this on Android emulator (API 30) in Unminified Page and it seems to be working as expected.

Unminified Page - Popup

Unminified Page - Long Press

bharanidharanj · 2022-03-18T13:10:55Z

TEST_IOS (PASSED): Tested this on iPhone 13 Pro (iOS 15.2) Simulator and the long press functionality seems to be deviated from the alignment. I don't know whether my assumption is right or wrong.

In-App - Popup

In-App - Long Press

System Keyboard - Popup

System Keyboard - Long Press

bharanidharanj · 2022-03-18T13:53:32Z

TEST_WEB_IOS (PASSED): Tested this on iPhone 13 Pro Simulator (iOS 15.2) in Unminified Page and it seems to be working as expected.

System Keyboard - Popup

System Keyboard - Long Press (Single row)

System Keyboard - Long Press (Multiple row)

mcdurdin · 2022-03-20T23:12:52Z

TEST_IOS (PASSED): Tested this on iPhone 13 Pro (iOS 15.2) Simulator and the long press functionality seems to be deviated from the alignment. I don't know whether my assumption is right or wrong.

Yes, this doesn't look right... 😢

TEST_IOS FAILED

mcdurdin · 2022-03-22T00:28:52Z

Okay, I've fixed up the issues with the callout positioning on iOS.

@keymanapp-test-bot retest TEST_IOS

MakaraSok · 2022-03-22T03:35:20Z

TEST_IOS (FAILED): the alignment on the key when long pressed looks better, but the visible border between the base key and the subkey is still seen on the first row, i.e. key q, w, r, t, y and p.

in both in-app and system

The visible border between the preview key and its base key is seen on all rows. The preview key doesn't seen to be fully aligned center. The right part of the key looks longer than that of the left.
1st row

2nd row

3 row

The visible border between the subkey and its base is seen on the 1st row only, but not the 2nd and 3rd. No alignment issue seen though, AFA I can tell.
1st row

2nd row

3rd row

Bonus screen recording if they help in anyway.

in-app

Screen.Recording.2022-03-22.at.9.27.16.AM.mov

system

Screen.Recording.2022-03-22.at.9.42.55.AM.mov

Adjusts the dimensions to use pixel boundaries to prevent antialiasing for some of the key preview and longpress popups, and adjusts horizontal positioning of key preview to center more precisely, for iOS.

mcdurdin · 2022-03-22T21:27:11Z

Okay, I've tweaked the positions slightly with the latest commit. Can you check these again per spec?

Sample key preview from Safari on iOS (zoomed):

@keymanapp-test-bot retest TEST_IOS TEST_WEB_IOS

bharanidharanj · 2022-03-23T07:12:54Z

TEST_IOS (FAILED): Re-tested this in iPhone 13 Pro (iOS 15.2) Simulator with the new PR (iOS) and I noticed that while long pressing the top row buttons the base key goes behind the multiple rows view. (eg., long pressing e letter would open the multiple rows popup, but the base key e is not shown)

In-App - Popup:

In-App - LongPress (Single row):

In-App LongPress (Multiple rows):

System Keyboard - popup:

System Keyboard - Long Press (Single row):

System Keyboard - Long Press (Multiple rows):

bharanidharanj · 2022-03-23T08:21:30Z

TEST_WEB_IOS (PASSED): Tested this in Unminified page on iPhone 13 Pro Simulator and it seems to be working fine.
Note: It is also working fine even in the Caps Lock is one.

Unminified Page : Popup

Unminified Page : Long Press (Single row)

Unminified Page : Long Press (Multiple rows)

mcdurdin · 2022-03-23T19:03:49Z

Please note that the longpress menu overlapping the e key is not a bug, but forced on us because iOS does not allow our longpress menu to be outside the keyboard frame.

But I'm still seeing some artifacts and alignment issues on your screenshots @bharanidharanj. I've highlighted a few of them from TEST_IOS; the TEST_WEB_IOS screenshots show the same issues. Neither the key preview nor the longpress are perfect.'

I tested on the iPhone SE 3rd Generation 15.4 Simulator and things looked pretty much pixel perfect there. However @bharanidharanj tested on iPhone 13 Pro and here things did not look right. So now to find out why.

Some examples:

antialiasing lines in junction between key tip and key cap (In-App - Popup, m key, Eurolatin):
key tip has wrong bottom alignment (In-App - Longpress, m key, Eurolatin):
key tip has wrong bottom alignment (In-App - Longpress, e key, Eurolatin).:

(Same issues apply for o key, Long Press, System Keyboard)
key cap does not correctly overlap the key tip (System Keyboard - popup, p key, Eurolatin):

A secondary issue here is that the key preview should probably be moved right by the border width?
key tip has wrong bottom alignment (System Keyboard - Longpress, m key, Eurolatin):
key tip does not overlap the longpress menu (web, Longpress, m key, Eurolatin):

TEST_IOS: FAILED due to artifacts described above
TEST_WEB_IOS: FAILED due to artifacts described above

mcdurdin · 2022-03-23T20:36:59Z

Okay, I've tried again and tested locally on both iPhone SE 3rd gen and iPhone 13 Pro to cater to the different resolutions. We should probably test against both those devices and with more than one keyboard -- the subpixel calculations can mask issues on different resolutions.

@keymanapp-test-bot retest TEST_IOS TEST_WEB_IOS

bharanidharanj · 2022-03-24T08:37:35Z

Okay, I've tried again and tested locally on both iPhone SE 3rd gen and iPhone 13 Pro to cater to the different resolutions. We should probably test against both those devices and with more than one keyboard -- the subpixel calculations can mask issues on different resolutions.

@keymanapp-test-bot retest TEST_IOS TEST_WEB_IOS

@mcdurdin Okay.

bharanidharanj · 2022-03-24T08:57:03Z

TEST_IOS (FAILED): Re-tested this in iPhone 13 Pro (iOS 15.2) Simulator with the updated PR (iOS) and I noticed that while long pressing the top row buttons the key tip has wrong bottom alignment as mentioned by Marc. (in his previous comments)

In-App - Popup:

In-App - LongPress (Single row):

In-App - LongPress (Multiple rows):

System Keyboard - popup:

System Keyboard - Long Press (Single row):

System Keyboard - Long Press (Multiple rows):

bharanidharanj · 2022-03-24T09:54:38Z

TEST_WEB_IOS (PASSED): Tested this in Unminified page on iPhone 13 Pro Simulator and it seems to be working as expected.

Unminified Page : Popup

Unminified Page : Single row

Unminified Page : Multiple rows

mcdurdin · 2022-03-25T03:54:34Z

TEST_IOS (FAILED): Re-tested this in iPhone 13 Pro (iOS 15.2) Simulator with the updated PR (iOS) and I noticed that while long pressing the top row buttons the key tip has wrong bottom alignment as mentioned by Marc.

Good catch! I missed that when I was re-testing. Okay, I have put in a fix for that, can you retest please?

@keymanapp-test-bot retest TEST_IOS

bharanidharanj · 2022-03-25T09:07:29Z

TEST_IOS (FAILED): Re-tested this in iPhone 13 Pro (iOS 15.2) Simulator with the updated PR (iOS) and I noticed that while long pressing the top row buttons the key tip has wrong bottom alignment as mentioned by Marc.

Good catch! I missed that when I was re-testing. Okay, I have put in a fix for that, can you retest please?

@keymanapp-test-bot retest TEST_IOS

@mcdurdin Okay. I will re-test it. Thanks.

bharanidharanj · 2022-03-25T10:15:57Z

TEST_IOS (FAILED): Retested this with the attached PR build (Keyman 15.0.211-beta-6383) in iPhone SE and the key tip has wrong bottom alignment in Longpress (Multiple rows). I am seeing the same result in iPhone 13 Pro Simulator too.

In-App (Popup)

In-App - Long Press (Single row)

In-App - Long Press (Multiple rows)

System Keyboard - Popup

System Keyboard - Long Press (Single row)

System Keyboard - Long Press (Multiple rows)

mcdurdin · 2022-03-27T17:45:50Z

TEST_IOS (FAILED): Retested this with the attached PR build (Keyman 15.0.211-beta-6383) in iPhone SE and the key tip has wrong bottom alignment in Longpress (Multiple rows). I am seeing the same result in iPhone 13 Pro Simulator too.

TEST_IOS (PASSED): I am comfortable with going ahead with that very minor artifact. Thank you for your attention to detail 😁

keyman-server · 2022-03-27T18:42:09Z

Changes in this pull request will be available for download in Keyman version 15.0.223-beta

mcdurdin requested review from jahorton and ermshiperete as code owners March 16, 2022 00:31

mcdurdin added this to the B15S4 milestone Mar 16, 2022

keymanapp-test-bot bot added has-user-test user-test-required User tests have not been completed labels Mar 16, 2022

github-actions bot added web/ web/engine/ fix labels Mar 16, 2022

keymanapp-test-bot bot removed the user-test-required User tests have not been completed label Mar 16, 2022

ermshiperete approved these changes Mar 16, 2022

View reviewed changes

mcdurdin added 4 commits March 17, 2022 10:15

fix(web): font size on key preview

a2aef99

Font size adjustment needed an override for the key preview to prevent it using the base key font size as a starting point.

fix(web): key square needed vertical align top

24398b4

On Safari, some keys were vertically misaligned, due to different default vertical-align.

fix(web): key preview position was inconsistent on iOS

86b4b82

Adjusts calculations for key preview and ensures we use box-sizing: content-box in all circumstances, to make it consistent across all platforms.

fix(web): adjust positioning for longpress popup

dde56e6

Adjusts positioning calculations for longpress popups and corresponding styles to make it consistent across all platforms, particularly iOS.

keymanapp-test-bot bot added the user-test-required User tests have not been completed label Mar 16, 2022

keymanapp-test-bot bot removed the user-test-required User tests have not been completed label Mar 18, 2022

Base automatically changed from fix/web/bounding-rect-offset to beta March 19, 2022 02:13

keymanapp-test-bot bot added the user-test-required User tests have not been completed label Mar 22, 2022

keymanapp-test-bot bot removed the user-test-required User tests have not been completed label Mar 22, 2022

fix(web): tweak iOS key preview and longpress dimensions

adf3fe2

Adjusts the dimensions to use pixel boundaries to prevent antialiasing for some of the key preview and longpress popups, and adjusts horizontal positioning of key preview to center more precisely, for iOS.

keymanapp-test-bot bot added the user-test-required User tests have not been completed label Mar 22, 2022

keymanapp-test-bot bot removed the user-test-required User tests have not been completed label Mar 23, 2022

fix(web): further iOS adjustments

3858a4c

keymanapp-test-bot bot added the user-test-required User tests have not been completed label Mar 23, 2022

keymanapp-test-bot bot removed the user-test-required User tests have not been completed label Mar 24, 2022

fix(web): adjust calc for callout height

b3ddf63

keymanapp-test-bot bot added the user-test-required User tests have not been completed label Mar 25, 2022

keymanapp-test-bot bot removed the user-test-required User tests have not been completed label Mar 25, 2022

mcdurdin merged commit 295f251 into beta Mar 27, 2022

mcdurdin deleted the fix/web/5929-ios-popup-positioning-and-style branch March 27, 2022 17:46

This was referenced Jun 16, 2022

bug(ios): key tips for top row cropped off if no predictive-text banner is active #6783

Closed

fix(web): key tip constraint logic requires .bottom CSS #6784

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(web): ios popup positioning and style #6383

fix(web): ios popup positioning and style #6383

mcdurdin commented Mar 16, 2022 •

edited

keymanapp-test-bot bot commented Mar 16, 2022 •

edited

darcywong00 commented Mar 16, 2022 •

edited

bharanidharanj commented Mar 16, 2022

bharanidharanj commented Mar 16, 2022

bharanidharanj commented Mar 16, 2022

mcdurdin commented Mar 16, 2022 •

edited

mcdurdin commented Mar 16, 2022

darcywong00 commented Mar 17, 2022

bharanidharanj commented Mar 18, 2022

bharanidharanj commented Mar 18, 2022

bharanidharanj commented Mar 18, 2022

mcdurdin commented Mar 20, 2022

mcdurdin commented Mar 22, 2022

MakaraSok commented Mar 22, 2022

mcdurdin commented Mar 22, 2022

bharanidharanj commented Mar 23, 2022 •

edited

bharanidharanj commented Mar 23, 2022

mcdurdin commented Mar 23, 2022 •

edited

mcdurdin commented Mar 23, 2022

bharanidharanj commented Mar 24, 2022

bharanidharanj commented Mar 24, 2022

bharanidharanj commented Mar 24, 2022

mcdurdin commented Mar 25, 2022

bharanidharanj commented Mar 25, 2022

bharanidharanj commented Mar 25, 2022

mcdurdin commented Mar 27, 2022

keyman-server commented Mar 27, 2022

fix(web): ios popup positioning and style #6383

fix(web): ios popup positioning and style #6383

Conversation

mcdurdin commented Mar 16, 2022 • edited

User Testing

keymanapp-test-bot bot commented Mar 16, 2022 • edited

User Test Results

Test Artifacts

darcywong00 commented Mar 16, 2022 • edited

Test Results

bharanidharanj commented Mar 16, 2022

bharanidharanj commented Mar 16, 2022

bharanidharanj commented Mar 16, 2022

mcdurdin commented Mar 16, 2022 • edited

Key Preview, Keyman for iOS

Longpress, Keyman for iOS

Key Preview, KeymanWeb on Safari / iOS

Longpress, KeymanWeb on Safari / iOS

mcdurdin commented Mar 16, 2022

darcywong00 commented Mar 17, 2022

bharanidharanj commented Mar 18, 2022

bharanidharanj commented Mar 18, 2022

bharanidharanj commented Mar 18, 2022

mcdurdin commented Mar 20, 2022

mcdurdin commented Mar 22, 2022

MakaraSok commented Mar 22, 2022

in both in-app and system

Bonus screen recording if they help in anyway.

mcdurdin commented Mar 22, 2022

bharanidharanj commented Mar 23, 2022 • edited

bharanidharanj commented Mar 23, 2022

mcdurdin commented Mar 23, 2022 • edited

mcdurdin commented Mar 23, 2022

bharanidharanj commented Mar 24, 2022

bharanidharanj commented Mar 24, 2022

bharanidharanj commented Mar 24, 2022

mcdurdin commented Mar 25, 2022

bharanidharanj commented Mar 25, 2022

bharanidharanj commented Mar 25, 2022

mcdurdin commented Mar 27, 2022

keyman-server commented Mar 27, 2022

mcdurdin commented Mar 16, 2022 •

edited

keymanapp-test-bot bot commented Mar 16, 2022 •

edited

darcywong00 commented Mar 16, 2022 •

edited

mcdurdin commented Mar 16, 2022 •

edited

bharanidharanj commented Mar 23, 2022 •

edited

mcdurdin commented Mar 23, 2022 •

edited