1583660 - input type=range element not rendering on Android

Status: VERIFIED FIXED

(Core :: Layout: Form Controls, defect, P2)

Description

[Matthew Finkel [:sysrqb]]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:60.0) Gecko/20100101 Firefox/60.0

Steps to reproduce:

Opened MDN page in Firefox for Android or Firefox Preview for input element of type range:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

Actual results:

The examples show the current position but not the track

Expected results:

The track and current position should be rendered.

Comment 1

[Matthew Finkel [:sysrqb]]

This was probably introduced by either Bug 1317870 or Bug 1481593. It broke in the nightly build on 2018-11-16. Also, just note, this isn't only affecting Fennec, Fenix is showing the same behavior.

Comment 2

[Matthew Finkel [:sysrqb]]

Hi Mats, maybe you can confirm/look at this?

Comment 3

[Mats Palmgren (inactive)]

Bug 1481593 most likely broke this by removing the background. That change is intentional though, because we want -webkit-appearance: none to not render the range track. It's basically impossible to support that behavior though without having a native theme.

Comment 4

[Mats Palmgren (inactive)]

Attachment: Bug 1583660 - Reinstate default background color / size for -moz-range-track on Android. r=jwatt

This reverts the changes from bug 1481593 / bug 1317870 which broke
the default rendering on Android only (since it doesn't have
a native theme for <input type=range>).

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/34a3e14b45b5
Reinstate default background color / size for -moz-range-track on Android.  r=jwatt

Comment 6

[Mats Palmgren (inactive)]

Comment on attachment 9096746 [details]
Bug 1583660 - Reinstate default background color / size for -moz-range-track on Android. r=jwatt

Beta/Release Uplift Approval Request

• User impact if declined: somewhat confusing rendering of type=range form controls on Android
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: see comment 0
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Android-only change, and it restores previously used code
• String changes made/needed: none

Comment 7

[Razvan Maries]

https://hg.mozilla.org/mozilla-central/rev/34a3e14b45b5

Comment 8

[Diana Rus]

Hi with the provided test build from Comment 7 the issue is solved, as now the inside both "Volume" and "Cowbell" and any other sections that contains element "input type = "range"" there is a gray line which shows the entire length of the track.
Verified with One Plus 6T-One Plus A6013(Android 9), Google Pixel 3a XL(Android 9) and Sony Xperia Z5 (Android 7.0.0).

Screenshot attached, please have a look.

I will modified the status for firefox 71 with verified. I will leave the ticket in this state until it is uplifted and can be verified on Firefox Beta.
Thank you

Comment 9

[Liz Henry (:lizzard) (relman/hg->git project)]

Double checking - Ryan, wouldn't this actually need esr uplift, not beta?

Comment 10

[Liz Henry (:lizzard) (relman/hg->git project)]

Comment on attachment 9096746 [details]
Bug 1583660 - Reinstate default background color / size for -moz-range-track on Android. r=jwatt

OK for beta uplift (for non-fennec products)
We will also need a patch for esr68 for Fennec.

Comment 11

[Ryan VanderMeulen [:RyanVM]]

Yeah, this affects all mobile products, not just Fennec. FYI, patch grafts cleanly to ESR68 as-is modulo a tiny reftest manifest conflict.

Comment 12

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

https://hg.mozilla.org/releases/mozilla-esr68/rev/88f0693a6468

Comment 13

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

https://hg.mozilla.org/releases/mozilla-beta/rev/c631aa99490f

Comment 14

[Eliza Balazs]

Verified as fixed on RC 68.2.0 build 2, ESR 68.2b7, Firefox Preview Nightly 191016 GV 71 with

• Google Pixel (Android Q);
• Samsung Galaxy Tab S3 (Android 8);
• Huawei Honor 8 (Android 7.0).

I will mark this as verified on ESR 68.
This is still reproducible on Firefox Preview 2.2.0-rc.2 GV 70.0.
mats: When will be the fix available for testing on Firefox Preview GV 70.0? Thanks!

Comment 15

[Mats Palmgren (inactive)]

Sorry, I don't know what "Firefox Preview GV 70.0" is. I would assume that if it's built from the mozilla-central v70 branch that it should be fixed. So there might be something still missing in the fix if it's not working (assuming it ever worked).

Comment 16

[Eliza Balazs]

Firefox Preview GV 70.0 is the Fenix Release, it can be downloaded from https://tools.taskcluster.net/index/project.mobile.fenix.v2.production/latest.
I will test the fix on treeherder beta and come back with the result.
Thanks!

Comment 17

[Eliza Balazs]

Verified as fixed on 70.0b15 with Samsung Galaxy Tab S3 (Android 8). I will mark this as verified on Firefox 70. Thanks!