OS Version: OS X 10.9.5
Safari Version: 7.1 (95184.108.40.206.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.)
3. Hover the cursor up and down along the inner right edge of the field, in horizontal alignment with the increment and decrement buttons.
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
Still broken in Safari version 8.0 (10600.1.25) on OS X Yosemite.
Created attachment 252499 [details]
Copy of JS Fiddle example
Still reproduces in Safari version 9.0.3 (11601.4.4)
(In reply to comment #4)
> Still reproduces in Safari version 9.0.3 (11601.4.4)
I will take a look at this.
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.
(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.