Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Android Chrome input date dimensions #36143

Merged
merged 8 commits into from
Jan 18, 2023

Conversation

tkrotoff
Copy link
Sponsor Contributor

@tkrotoff tkrotoff commented Apr 10, 2022

Under Android Chrome, input date dimensions are broken:

  • too tall because of "margin: 1px 24px 1px 4px" inside the shadow DOM
  • width is too small by default

Before 40px high vs 38px for the other inputs:

before

After 38px high:

after

I've tested by plugging in my Android device via USB then opened chrome://inspect/#devices (USB debugging must be enabled on the device).
Hence the need for an HTTP server

@tkrotoff tkrotoff requested a review from a team as a code owner April 10, 2022 21:48
package.json Outdated Show resolved Hide resolved
@tkrotoff tkrotoff force-pushed the fix-android-chrome-input-date branch from 6c8aee4 to 4968592 Compare April 10, 2022 22:10
@mdo mdo requested a review from XhmikosR April 11, 2022 22:30
Copy link
Member

@XhmikosR XhmikosR left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See comments

@tkrotoff tkrotoff force-pushed the fix-android-chrome-input-date branch 5 times, most recently from 234d3d0 to 73c81ec Compare April 17, 2022 21:41
@tkrotoff tkrotoff force-pushed the fix-android-chrome-input-date branch from 73c81ec to 83fdff0 Compare May 8, 2022 18:52
@tkrotoff tkrotoff force-pushed the fix-android-chrome-input-date branch from 83fdff0 to 1fefec6 Compare June 14, 2022 20:33
@tkrotoff
Copy link
Sponsor Contributor Author

Any news?

@tkrotoff tkrotoff force-pushed the fix-android-chrome-input-date branch from 1fefec6 to 1b36335 Compare June 17, 2022 10:19
@tkrotoff tkrotoff force-pushed the fix-android-chrome-input-date branch from 1b36335 to ae7bcfe Compare July 23, 2022 13:50
@tkrotoff
Copy link
Sponsor Contributor Author

Any news?

@mdo
Copy link
Member

mdo commented Dec 29, 2022

Missed this myself. Is the width bug present in any other browser? I don’t have an Android to test myself.

@tkrotoff tkrotoff force-pushed the fix-android-chrome-input-date branch from ae7bcfe to 8ecff17 Compare January 16, 2023 22:50
@tkrotoff
Copy link
Sponsor Contributor Author

tkrotoff commented Jan 17, 2023

Visual tests js/tests/visual/input.html

On macOS Monterey 12.6.2:

  • Chrome 109: no problem
  • Firefox 108: no problem
  • Safari 16.2: no problem
  • Edge 109: no problem

On Android 13 (Pixel 4):

  • Chrome 109: width & height problem
  • Firefox 109: no problem

On iOS 16.2 (iPhone 14 Pro Max Simulator):

iOS 16.2 Safari 16.2

The width problem on Safari iOS is also fixed by this PR:

iOS 16.2 Safari 16.2 fix min-width: 10ch

@tkrotoff tkrotoff force-pushed the fix-android-chrome-input-date branch 2 times, most recently from c44d271 to d8e4c4f Compare January 17, 2023 01:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

3 participants