Closed Bug 1399776 Opened 2 years ago Closed 2 years ago

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

Categories

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

57 Branch
ARM
Android
defect

Tracking

()

RESOLVED FIXED
mozilla57
Tracking Status
firefox-esr52 --- unaffected
firefox55 --- unaffected
firefox56 --- unaffected
firefox57 blocking fixed

People

(Reporter: karlcow, Assigned: lochang)

References

()

Details

(Keywords: regression, regressionwindow-wanted, Whiteboard: [webcompat])

Attachments

(1 file)

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
Flags: webcompat?
Summary: background-color: transparent makes the checkbox disappears on Firefox Android → background-color: transparent makes the checkbox disappear on Firefox Android
Flags: needinfo?(lochang)
I will investigate the bug. Leave the ni to remind myself.
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.
Marking as release blocker based on the number of already known webcompat issues linked to this regression.
Blocks: 1352238
No longer depends on: 1352238
Assignee: nobody → lochang
Status: NEW → ASSIGNED
Priority: -- → P1
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.
(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.
Flags: needinfo?(lochang)
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?
Attachment #8909211 - Flags: review?(mats) → review+
Blocks: 1399723
(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).
Keywords: checkin-needed
Pushed by ryanvm@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/4dc8f5f9259c
Draw a default background-color: white for checkbox/radio on Android. r=mats
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/4dc8f5f9259c
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla57
You need to log in before you can comment on or make changes to this bug.