Skip to content

Fix Android Chrome input date dimensions - #36143

Merged
mdo merged 8 commits into
twbs:mainfrom
tkrotoff:fix-android-chrome-input-date
Jan 18, 2023
Merged

Fix Android Chrome input date dimensions#36143
mdo merged 8 commits into
twbs:mainfrom
tkrotoff:fix-android-chrome-input-date

Conversation

@tkrotoff

@tkrotoff tkrotoff commented Apr 10, 2022 •
edited
Loading

Copy link
Copy Markdown
Contributor

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
tkrotoff
tkrotoff commented Apr 10, 2022
View reviewed changes
Comment thread scss/forms/_form-control.scss Outdated
tkrotoff
tkrotoff commented Apr 10, 2022
View reviewed changes
Comment thread package.json Outdated
@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
XhmikosR
XhmikosR previously requested changes Apr 12, 2022
View reviewed changes

@XhmikosR XhmikosR left a comment

Copy link
Copy Markdown
Member

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

tkrotoff commented Jun 14, 2022

Copy link
Copy Markdown
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

tkrotoff commented Jul 23, 2022

Copy link
Copy Markdown
Contributor Author

Any news?

@mdo mdo added css Sass sources or compiled CSS v5 v5, the v5-dev branch labels Dec 29, 2022
@mdo

mdo commented Dec 29, 2022

Copy link
Copy Markdown
Member

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

tkrotoff commented Jan 17, 2023 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

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
This was referenced Aug 12, 2024
Closed
Closed
@acharya-deepak acharya-deepak mentioned this pull request Aug 17, 2024
Open
@soelshaikh soelshaikh mentioned this pull request Aug 18, 2024
Open
This was referenced Aug 26, 2024
Open
Open
Open
@tchellam tchellam mentioned this pull request Aug 27, 2024
Open
@sophakphol sophakphol mentioned this pull request Aug 29, 2024
Open
@martinez-ml martinez-ml mentioned this pull request Aug 30, 2024
Merged
@ungtsuhan ungtsuhan mentioned this pull request Aug 30, 2024
Open
This was referenced Sep 3, 2024
Open
Open
Open
@AlexanderSCK AlexanderSCK mentioned this pull request Sep 8, 2024
Open
This was referenced Sep 24, 2024
Open
Open
Open
Open
@pinco227 pinco227 mentioned this pull request Sep 27, 2024
Open
This was referenced Sep 28, 2024
Open
Open
Open
Open
@Akhamesra Akhamesra mentioned this pull request Oct 2, 2024
Open
@YnnusAsamal YnnusAsamal mentioned this pull request Oct 3, 2024
Open
@jtprogru jtprogru mentioned this pull request Oct 5, 2024
Open
@Gutts-n Gutts-n mentioned this pull request Oct 5, 2024
Open
@Kimahari Kimahari mentioned this pull request Oct 5, 2024
Merged
@Arrhenius09 Arrhenius09 mentioned this pull request Nov 6, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@XhmikosR XhmikosR XhmikosR left review comments
@mdo mdo mdo approved these changes

Assignees

No one assigned

Labels

css Sass sources or compiled CSS v5 v5, the v5-dev branch

Projects

No open projects
v5.3.0-alpha2
Status: Done

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@tkrotoff @mdo @XhmikosR