bug(web): Add Bottom Border to Popup Keys when Styled

dyacob commented 1 year ago

Is your feature request related to a problem? Please describe.

On an iPhone, keys on a popup menu have a border around styled keys on 3 sides, but not the bottom side. In the attached screenshot, the bottom area of a popup without the border has been outlined:

iPhone-KM-Popup-CSS-No-Border

Describe the solution you'd like

An equal border all around.

Describe alternatives you've considered

No response

Related issues

No response

Keyman apps

[ ] Keyman for Android
[X] Keyman for iPhone and iPad
[ ] Keyman for Linux
[ ] Keyman for macOS
[ ] Keyman for Windows
[ ] Keyman Developer
[ ] KeymanWeb
[ ] Other - give details at bottom of form

Keyman version

15.0.273

Operating system

iOS 16.1.2

Device

iPhone (probably on iPad also)

Target application

No response

Browser

No response

Keyboard name

gff_amharic

Keyboard version

3.1

Language name

Amharic

Additional context

This is a general iOS CSS issue and not specific to a particular keyboard.

mcdurdin commented 1 year ago

Is this the same when the keys have default styling?

Note: I have classified this as a bug, because it's a problem with the visual styling of the keyboard rather than new functionality.

jahorton commented 7 months ago

Interestingly, this only seems to be an issue within the mobile apps; the same code, as used for KeymanWeb's OSK on mobile devices, does not have this problem. Seems to be something WebView-related somehow.

jahorton commented 7 months ago

And @mcdurdin had the deep knowledge & intuition here: our Web test pages include the <!DOCTYPE html> header to ensure standards mode, while the keyboard host-pages within the mobile apps did not. Apparently "quirks mode" vs "standards mode" was the difference.

jahorton commented 7 months ago

This will land as part of the upcoming gestures feature for 17.0; it's already been fixed on that branch.

keymanapp / keyman