Bug 137269 - weird input[type=number] incr/decrement button behavior at odd-numbered font sizes
Summary: weird input[type=number] incr/decrement button behavior at odd-numbered font ...
Status: ASSIGNED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: WebKit Nightly Build
Hardware: Mac (Intel) OS X 10.11
: P2 Normal
Assignee: Antonio Gomes
URL: http://jsfiddle.net/FFXEc/
Keywords: HasReduction, InRadar
Depends on:
Blocks: 159753
  Show dependency treegraph
 
Reported: 2014-09-30 14:24 PDT by Chris Rebert
Modified: 2024-01-15 17:21 PST (History)
10 users (show)

See Also:


Attachments
Copy of JS Fiddle example (1.00 KB, text/html)
2015-05-06 11:44 PDT, Chris Rebert
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Chris Rebert 2014-09-30 14:24:29 PDT
OS Version: OS X 10.9.5
Safari Version: 7.1 (9537.85.10.17.1)

Steps to reproduce the problem:
1. Open the demo JS Fiddle ( http://jsfiddle.net/FFXEc/ ) in Safari.
2. (All further instructions are regarding the second/middle input[type=number] field on the demo.)
[Bug A]:
3. Hover the cursor up and down along the inner right edge of the field, in horizontal alignment with the increment and decrement buttons.
[Bug B/C]:
4. Click on the top part of the decrement button, such that you observe normal behavior.
5. Continue clicking repeatedly while moving your cursor downward, beyond the decrement button but still within the bounds of the input field.

What is the expected behavior?
A: The cursor ought to always remain a pointer while it's within the bounds of the decrement button.
B: Clicking outside the bounds of the increment/decrement buttons should not cause the input field's value to change.
C: Invoking the decrement button should always cause it to flash blue to indicate that it was clicked.

What went wrong?
A: The cursor changes from a pointer to an "I"-bar (for text entry/selection) before you have gone outside the bounds of the decrement button.
B: The field's number value continues to decrement.
C: The decrement button did not flash blue to indicate that it was somehow clicked.

Original Bootstrap bug report: https://github.com/twbs/bootstrap/issues/8350
Related Chromium bug: https://code.google.com/p/chromium/issues/detail?id=337668
Comment 1 Chris Rebert 2014-10-29 16:04:48 PDT
Still broken in Safari version 8.0 (10600.1.25) on OS X Yosemite.
Comment 2 Radar WebKit Bug Importer 2014-10-31 00:03:12 PDT
<rdar://problem/18834768>
Comment 3 Chris Rebert 2015-05-06 11:44:29 PDT
Created attachment 252499 [details]
Copy of JS Fiddle example
Comment 4 Chris Rebert 2016-02-07 16:18:43 PST
Still reproduces in Safari version 9.0.3 (11601.4.4)
Comment 5 Antonio Gomes 2016-04-23 15:18:55 PDT
(In reply to comment #4)
> Still reproduces in Safari version 9.0.3 (11601.4.4)

I will take a look at this.
Comment 6 zalan 2016-04-23 19:41:17 PDT
It's probably because the placeholder renderer for the increment/decrement button is the height of the button element while the actual widget (for obvious reasons) is not scaled up to it. The fix is to size and position the placeholder renderer in sync with the  widget.
Comment 7 zalan 2016-04-23 21:25:18 PDT
(In reply to comment #6)
> It's probably because the placeholder renderer for the increment/decrement
> button is the height of the button element while the actual widget (for
> obvious reasons) is not scaled up to it. The fix is to size and position the
> placeholder renderer in sync with the  widget.
Though it might be a bit difficult as it's all flexbox driven afair.
Comment 8 Ahmad Saleem 2023-09-18 15:55:16 PDT
Fixed recently in Chromium / Blink as well - https://chromium.googlesource.com/chromium/src.git/+/f75283abf000d956d99336f5762c4ff215ef44fb

Might not be exact fix but good to at least tag for even importing text etc.
Comment 9 Ahmad Saleem 2024-01-15 10:50:31 PST
(In reply to Ahmad Saleem from comment #8)
> Fixed recently in Chromium / Blink as well -
> https://chromium.googlesource.com/chromium/src.git/+/
> f75283abf000d956d99336f5762c4ff215ef44fb
> 
> Might not be exact fix but good to at least tag for even importing text etc.

Just checked and we can merge this, it seems.
Comment 10 Tim Nguyen (:ntim) 2024-01-15 16:34:41 PST
(In reply to Ahmad Saleem from comment #9)
> (In reply to Ahmad Saleem from comment #8)
> > Fixed recently in Chromium / Blink as well -
> > https://chromium.googlesource.com/chromium/src.git/+/
> > f75283abf000d956d99336f5762c4ff215ef44fb
> > 
> > Might not be exact fix but good to at least tag for even importing text etc.
> 
> Just checked and we can merge this, it seems.

Feel free to submit a PR :)
Comment 11 Ahmad Saleem 2024-01-15 17:03:24 PST
(In reply to Tim Nguyen (:ntim) from comment #10)
> (In reply to Ahmad Saleem from comment #9)
> > (In reply to Ahmad Saleem from comment #8)
> > > Fixed recently in Chromium / Blink as well -
> > > https://chromium.googlesource.com/chromium/src.git/+/
> > > f75283abf000d956d99336f5762c4ff215ef44fb
> > > 
> > > Might not be exact fix but good to at least tag for even importing text etc.
> > 
> > Just checked and we can merge this, it seems.
> 
> Feel free to submit a PR :)

Doing local build but it might involve to merge this as well: https://source.chromium.org/chromium/chromium/src/+/2e5cf9f34b1ee2d0616be5f29501166021006416
Comment 12 Ahmad Saleem 2024-01-15 17:21:35 PST
(In reply to Ahmad Saleem from comment #8)
> Fixed recently in Chromium / Blink as well -
> https://chromium.googlesource.com/chromium/src.git/+/
> f75283abf000d956d99336f5762c4ff215ef44fb
> 
> Might not be exact fix but good to at least tag for even importing text etc.

Merging just this definitely leads to regression and in some cases the increment button get stuck and even if we lose focus, it continues to increment till we don't refresh page. Just noticed on local build using test case from Comment 0.