1898214 - bakemall.jp - Items are overlapped (relies on magic <input type=number> min / max sizing behavior).

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect)

Description

[Andreea Zlata]

Environment:
Operating system: Windows 10
Firefox version: Firefox 126.0/128.0a1 (2024-05-21)

Steps to reproduce:

1. Access https://bakemall.jp/store/aab71dcd-c00a-4eb7-a22b-4a48c2f603a1?date=2024-05-30T07%3A00%3A00%2B09%3A00
2. You might be prompted to choose a date
3. scroll through the page
4. Try to add items

Expected Behavior:
The quantities of the items can be changed without issues.

Actual Behavior:
The characters, buttons and fields for entering quantities all overlap, making it impossible to input correctly.

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in Firefox Nightly, Firefox Release
• Does not reproduce in Chrome

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

Comment 1

[Andreea Zlata]

Attachment: 22.05.2024_11.37.36_REC.mp4

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

Since nightly and release are affected, beta will likely be affected too.
For more information, please visit BugBot documentation.

Comment 3

[Alice0775 White]

Attachment: semi-reduced.html

Comment 4

[Alice0775 White]

Attachment: semi-reduced.html

Comment 5

[Alice0775 White]

Attachment: semi-reduced.html

Comment 6

[Emilio Cobos Álvarez (:emilio)]

Attachment: reduced test-case

This is just about the auto size of the number input, apparently... Chrome seems to do something where the min / max values influence the auto size, somehow?

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Chrome behaves the same as Firefox if I remove the min="" and max="" attributes... Ugh

Comment 8

[Emilio Cobos Álvarez (:emilio)]

WebKit logic is here.

Blink is here, which looks basically the same (so, probably comes from WebKit).

Comment 9

[Emilio Cobos Álvarez (:emilio)]

I filed https://github.com/whatwg/html/issues/10390 with a proposal.

Comment 10

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1898214 - Implement min/max-derived sizing for <input type=number>. r=smaug

See https://github.com/whatwg/html/issues/10390 for the spec issue.

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/cd09151a1c46
Implement min/max-derived sizing for <input type=number>. r=smaug

Comment 12

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/46632 for changes under testing/web-platform/tests

Comment 13

[Serban Stanca [:SerbanS]]

Backed out for causing OS X wpt failures in transform-input-014.html.

• Backout link
• Push with failures
• Failure Log
• Failure line: TEST-UNEXPECTED-FAIL | /css/css-transforms/transform-input-014.html | Testing http://web-platform.test:8000/css/css-transforms/transform-input-014.html == http://web-platform.test:8000/css/css-transforms/transform-input-014-ref.html

Comment 14

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR was closed without merging

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/7fdc398eba16
Implement min/max-derived sizing for <input type=number>. r=smaug

Comment 16

[pstanciu]

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

Comment 17

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 18

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 19

[BugBot [:suhaib / :marco/ :calixte]]

The patch landed in nightly and beta is affected.
:emilio, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
• If no, please set status-firefox127 to wontfix.

For more information, please visit BugBot documentation.

Comment 20

[Emilio Cobos Álvarez (:emilio)]

This is a long-standing bug so probably not worth uplifting.

Comment 21

[Ardelean Oana, Desktop Test Engineering [:oardelean]]

Reproducible on a 2024-05-22 Nightly build on Windows 10.
Verified as fixed on Firefox 128.0 and Firefox Nightly 129.0a1 on Windows 10, Ubuntu 22, macOS 14.