With `-moz-appearance: none`, Firefox doesn't get rid of the <input type=range> track like Chrome does

RESOLVED FIXED in Firefox 65

Status

()

enhancement
P4
normal
RESOLVED FIXED
10 months ago
4 months ago

People

(Reporter: jwatt, Assigned: mats)

Tracking

(Blocks 1 bug)

unspecified
mozilla65
Points:
---
Dependency tree / graph
Bug Flags:
in-testsuite +

Firefox Tracking Flags

(firefox65 fixed)

Details

Attachments

(2 attachments)

Reporter

Description

10 months ago
With `-moz-appearance: none`, Firefox doesn't get rid of the <input type=range> track like Chrome does. Probably this isn't that important for web content.
Assignee

Comment 1

6 months ago
I think this caused https://github.com/webcompat/web-bugs/issues/8592 .
The site has changed since then though and seems to be working now.
It appears they are now using a bunch of <div>s to implement
a home-grown form control.  Sigh, poor a11y users...
Assignee

Comment 2

6 months ago
Posted file Testcase
We're also incompatible when the element has a 'border' or 'background'...
Assignee: nobody → mats
Assignee

Comment 3

6 months ago
Posted patch fix+testSplinter Review
This patch addresses the background/theme incompatibilities.
It makes us render the attached testcase roughly the same as
Chrome/Safari.

I also noticed that our margin is excessive compared to other
UAs, and that the intrinsic sizing has some bugs, but I'll
address those in a separate follow-up bug.
Attachment #9024969 - Flags: review?(jwatt)
Reporter

Comment 4

6 months ago
Comment on attachment 9024969 [details] [diff] [review]
fix+test

Review of attachment 9024969 [details] [diff] [review]:
-----------------------------------------------------------------

Thanks, Mats!
Attachment #9024969 - Flags: review?(jwatt) → review+
Assignee

Comment 5

6 months ago
Fwiw, I just found this about the range control in various UAs:
https://css-tricks.com/sliding-nightmare-understanding-range-input/
lot's of interesting details and peculiarities...

Comment 6

6 months ago
Pushed by mpalmgren@mozilla.com:
https://hg.mozilla.org/integration/mozilla-inbound/rev/17ec28a9a202
Make <input type=range> layout more compatible with WebKit/Blink.  r=jwatt
Assignee

Updated

6 months ago
Flags: in-testsuite+

Comment 7

6 months ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/17ec28a9a202
Status: NEW → RESOLVED
Last Resolved: 6 months ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla65
Depends on: 1524573
You need to log in before you can comment on or make changes to this bug.