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

Status: RESOLVED FIXED

(Core :: Layout, enhancement, P4)

Description

[Jonathan Watt [:jwatt]]

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.

Comment 1

[Mats Palmgren (inactive)]

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...

Comment 2

[Mats Palmgren (inactive)]

Attachment: Testcase

We're also incompatible when the element has a 'border' or 'background'...

Comment 3

[Mats Palmgren (inactive)]

Attachment: fix+test

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.

Comment 4

[Jonathan Watt [:jwatt]]

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

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

Thanks, Mats!

Comment 5

[Mats Palmgren (inactive)]

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

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/17ec28a9a202
Make <input type=range> layout more compatible with WebKit/Blink.  r=jwatt

Comment 7

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/mozilla-central/rev/17ec28a9a202