1399776 - background-color: transparent makes the checkbox disappear on Firefox Android

Status: RESOLVED FIXED

(Core Graveyard :: Widget: Android, defect, P1)

Description

[Karl Dubost💡 :karlcow]

This is a spin off of https://webcompat.com/issues/9899
but I created a https://codepen.io/webcompat/pen/PJwOYG for the reduced test case.

<input type="checkbox" style="background-color: transparent;">

On Safari iOS, it displays the checkbox.
On Firefox Android, it becomes invisible.
On Chrome Android, it displays the checkbox.


Probably since the release of Bug 1352238

Comment 1

[Louis Chang [:louis]]

I will investigate the bug. Leave the ni to remind myself.

Comment 2

[Karl Dubost💡 :karlcow]

So there are two things at play. I discovered this with https://webcompat.com/issues/9746

1. the default state of the background-color button (radio, checkbox) in the Firefox Android (after Bug 1352238) is transparent. It takes the color of any background. It is white on Firefox Desktop and other browsers.
   See https://codepen.io/webcompat/pen/PJwOYG

2. Applying "background-color: transparent" has no effect on Safari and Chrome. and no effect on desktop.
   Maybe it has no effect on Firefox Android too, but because the default state is currently transparent, it gives the impression it had.

Comment 3

[Julien Cristau [:jcristau]]

Marking as release blocker based on the number of already known webcompat issues linked to this regression.

Comment 4

[Mats Palmgren (inactive)]

It looks like we simply forgot to add a background in the Paint methods:
http://searchfox.org/mozilla-central/source/widget/android/nsNativeThemeAndroid.cpp#19
Should be pretty easy to fix by adding a Fill there with some grey-ish color.

Comment 5

[Louis Chang [:louis]]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=be88535e1f0955231e8656a2e8703d97f1fc44cd

Comment 6

[Louis Chang [:louis]]

Attachment: Bug 1399776 - Draw a default background-color: white for checkbox/radio on Android.

Review commit: https://reviewboard.mozilla.org/r/180796/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/180796/

Comment 7

[Louis Chang [:louis]]

(In reply to Mats Palmgren (:mats) from comment #4)
> It looks like we simply forgot to add a background in the Paint methods:
> http://searchfox.org/mozilla-central/source/widget/android/
> nsNativeThemeAndroid.cpp#19
> Should be pretty easy to fix by adding a Fill there with some grey-ish color.

Ya. I have added background painting in both checkbox and radio. Could you review the patch? Thanks.

Comment 8

[Mats Palmgren (inactive)]

Comment on attachment 8909211 [details]
Bug 1399776 - Draw a default background-color: white for checkbox/radio on Android.

https://reviewboard.mozilla.org/r/180796/#review186064

r=mats

nit: I think we normally draw the background before the border,
but either way is probably fine.  It might make a difference for
anti-aliasing though?

Comment 9

[Louis Chang [:louis]]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=b13fc0bcaab7241602b716fd0f6d9bee5ac35462

Comment 10

[Louis Chang [:louis]]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=b681af5300b11ec54457c3c82faa2d2506221021

Comment 11

[Louis Chang [:louis]]

(In reply to Mats Palmgren (:mats) from comment #8)
> nit: I think we normally draw the background before the border,
> but either way is probably fine.  It might make a difference for
> anti-aliasing though?

I think I will leave it the same for now. Since I tried to paint background before border (comment 10), it doesn't fix any fuzzy test.

Also checkin-needed since the try result looks good (comment 9).

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4dc8f5f9259c
Draw a default background-color: white for checkbox/radio on Android. r=mats

Comment 13

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/4dc8f5f9259c

Comment 14

[Chris Peterson [:cpeterson]]

Removing regressionwindow-wanted keyword because this bug has been resolved.

Comment 15

[Chris Peterson [:cpeterson]]

Removing regressionwindow-wanted keyword because this bug has been resolved.

Comment 16

[Chris Peterson [:cpeterson]]

Removing regressionwindow-wanted keyword because this bug has been resolved.