1966389 - www.boots.com - "Location" field overflows

Status: ASSIGNED

(Web Compatibility :: Site Reports, defect, P2)

Description

[Calin Tanase]

Environment:
Operating system: Android 12
Firefox version: Firefox Mobile [phone]

Steps to reproduce:

1. Go to https://www.boots.com/opticiansappointments
2. Observe the "Location" field.

Expected Behavior:
The "Location" field has the same width as other fields.

Actual Behavior:
The "Location" field overflows.

Notes:

• The other fields/buttons are not rendered correctly as well, their width is much smaller
• Reproduces regardless of the status of ETP
• Reproduces in firefox-nightly, and firefox-release
• Does not reproduce in chrome

Created from https://github.com/webcompat/web-bugs/issues/154274

Comment 1

[Calin Tanase]

Attachment: image.png

Comment 2

[Dennis Schubert [:denschub]]

Reproducible in RDM, appears to be flexbox'ish

Comment 3

[Daniel Holbert [:dholbert]]

This is the site using -webkit-fill-available.

They have these two rules:

.Address input,
.RebookAddress input {
  width:401px
}

@media only screen and (max-width: 1224px) {
  .Address input, .RebookAddress input, .Age select, .AppointmentType select {
    width: -webkit-fill-available;
}

https://appointments.boots.com/OPTICIANS_OABS/Content/JourneyContent/65665948-c825-4dfb-994b-a2fa00c37edc.css

We don't yet support -webkit-fill-available, so we just honor the first one and dutifully set the element to be 401px (which is wider than my phone screen).

If I toggle layout.css.webkit-fill-available.enabled to true, then we honor it and match Chrome's rendering.

In the meantime, we could ship an intervention to match the above-quoted rule but with -moz-available -- i.e. we could add this:

@media only screen and (max-width: 1224px) {
  .Address input, .RebookAddress input, .Age select, .AppointmentType select {
    width: -moz-available;
}

Comment 4

[Thomas Wisniewski [:twisniewski]]

Attachment: Bug 1966389 - add a CSS webcompat intervention for boots.com to make appointment form elements the same width; r?denschub

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/7e85b1424e17
https://hg.mozilla.org/integration/autoland/rev/7eef38dfd7ef
add a CSS webcompat intervention for boots.com to make appointment form elements the same width; r=denschub,webcompat-reviewers

Comment 6

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/7eef38dfd7ef

Comment 7

[Daniel Holbert [:dholbert]]

This should be fixed by the patch that I've just landed in bug 1988938, given the use of width: -webkit-fill-available in comment 3.

I'll plan to retest in tomorrow's Nightly, with the intervention disabled, and I'll close after confirming that it's fixed (or perhaps after we've removed the intervention, per Thomas's preference in bug 1944727 comment 14).

--> swapping in bug 1988938 as the platform-bug here rather than bug 1872755 (which remains open and tracks broader support that's not needed here).

Comment 8

[Daniel Holbert [:dholbert]]

Confirmed that this was fixed by bug 1988938, and the intervention is no longer needed (we could e.g. gate it on the value of the about:config pref).

I tested latest Nightly 2025-09-18 on Android, disabled the about:compat intervention, and visited the URL in comment 0.
--> Expected results (no overflow)

For good measure, I then toggled layout.css.webkit-fill-available.enabled to false (restoring old behavior), and reloaded the page.
--> Actual results (overflow, as in comment 1)

That confirms bug 1988938 has fixed this. Leaving open to track that we'll need to eventually remove the intervention, though (after pref-gating it in bug 1989375).

Comment 9

[Calin Tanase]

Retriaged, I can confirm as well that the issue does not reproduce even with intervention disabled.

Tested with:

• Browser / Version: Nightly 145.0a1-20250918213023
• Operating System: Google Pixel 5 (Android 14)

Comment 10

[Raul Bucata]

Commenting so this does not appear on our re-triage list for the next week.

Comment 11

[Raul Bucata]

Daniel, can this issue be closed, since it does not reproduce regardless of the intervention status?

Comment 12

[Thomas Wisniewski [:twisniewski]]

We still need the intervention while layout.css.webkit-fill-available.enabled is around, and we prefer keeping bugs open for tracking while interventions are still around.

Comment 13

[Raul Bucata]

It seems the intervention is still active, leaving a comment to rule out the issue from our weekly re-triage process.

Comment 14

[Calin Tanase]

Tom, is it safe to close this one as fixed? I can't find any interventions on the latest Nightly on about:compat for boots.com and the location field is displayed correctly regardless of the layout.css.webkit-fill-available.enabled status.

Comment 15

[Thomas Wisniewski [:twisniewski]]

We actually are still shipping an intervention, but yes if it's no longer needed even with the pref flipped, then I'll remove it and we can close the bug.