1842568 - The birth year is not centered in the calendar when creating an account on airbnb.com

Status: NEW

(Firefox for Android :: Browser Engine, defect, P3)

Description

[Calin Tanase]

Attachment: Airbnb - date of birth.mp4

Environment:
Operating system: OnePlus 6 A6000 (Android 11)
Firefox version: Nightly 117.0a1-20230709093445

Steps to reproduce:

1. Go to https://www.airbnb.com/login
2. Click on the "Continue with email" button.
3. Enter an email thats not registered on airbnb.
4. Click "Continue".
5. Tap on the "Birthdate" field.
6. Tap on the year on the calendar.
7. Observe the layout.

Expected Behaviour:
The birth year is centered.

Actual Behaviour:
The birth year is aligned to left.

Notes:

1. Screen rec provided
2. The layout is slightly different
3. Reproducible on Firefox Release as well
4. Reproducible regardless of the ETP
5. Not reproducible on Chrome

Comment 1

[Calin Tanase]

Verified this issue and it's still reproducible on Firefox versions 122 and 124.

Environment:
Operating system: OnePlus 6 A6000 (Android 11)
Browsers: Firefox Nightly 124.0a1-20240129214018 / Firefox Release 122.0-20240118164516 / Chrome 121.0.6167.101

Note: Not reproducible on Chrome

Comment 2

[Thomas Wisniewski [:twisniewski]]

This just seems to be how Fenix displays the years for an input with type=date. The Gecko embedded browser and Focus shows the years centered, but not Fenix. Indeed when I visit https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date and open the picker there and click on the year, Fenix also left-aligns the years there (though there is only one listed there, 2018).

@cpeterson, is this maybe just how the design is intended to work in Fenix, or perhaps a bug with the year-list in the Fenix datepicker?

Comment 3

[Chris Peterson [:cpeterson]]

I doubt left-justifying the year in Fenix's date picker was an intentional design decision, since it looks ugly (ugly enough for Calin to file a bug report! :) and it's centered in Focus. If the year is centered in Chrome and Focus, then we should center it in Fenix.

This bug is probably straightforward to fix, since the year is centered in Focus, but it's a low priority because it doesn't prevent users from using the date picker.