Open Bug 1435665 Opened 2 years ago Updated 3 months ago

input type=button background-color should be rgb(240, 240, 240) on Android.

Categories

(Core :: Widget: Android, enhancement, P3)

58 Branch
Unspecified
Android
enhancement

Tracking

()

Webcompat Priority P3
Tracking Status
firefox60 --- affected

People

(Reporter: karlcow, Assigned: denschub)

References

()

Details

(Whiteboard: [webcompat:p3])

This is a spin-off of a webcompat issue https://webcompat.com/issues/11755

some websites rely on the background-color of <input type=button> to get a meaning rendering or cosmetic effect.

On macos, the button color is defined as buttonface which is rgb(240, 240, 240)

https://dxr.mozilla.org/mozilla-central/rev/e22e2c9eb81686e958a9448ea3d1e8cd766743e2/layout/style/res/forms.css#630

but on Android, the background-color is white rgb(255, 255, 255) and is defined in content.css
https://dxr.mozilla.org/mozilla-central/rev/ef1fefe4c6d1f95e2bdf872094e02e85c962aa86/mobile/android/themes/geckoview/content.css#124-135
So this is a bit more complex than just the background-color. 
We need to check also other color definitions such as border-color, etc.
In some design the buttons are barely visible. See https://webcompat.com/issues/13196
So this is another one with input type='text' where the disabled background is grey and create a difference of rendering.
https://webcompat.com/issues/7426

Probably this issue needs to be widen a bit in scope and assess the differences of styles in between Safari/Chrome/Firefox and Edge for all the user agent stylesheet values.
See Also: → 1352238
Assignee: nobody → kdubost
As of today, documenting.
(I need to double check on devices, some values seem strange)

The CSS defined for Android
* Gecko (Android) https://dxr.mozilla.org/mozilla-central/rev/085cdfb90903d4985f0de1dc7786522d9fb45596/mobile/android/themes/geckoview/content.css


* Blink https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/css/html.css?rcl=43fd1f406f081f94a50f124cd8bbee283ad10fc0


Maybe relevant too Bug 598421


In Chromium we get
===================================
/* form elements */

input {
    background-color: white;
}

textarea {
    background-color: white;
}


input[type="hidden" i], input[type="image" i], input[type="file" i] {
    background-color: initial;
}

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: #FAFFBD !important;
}

input[type="radio" i], input[type="checkbox" i] {
    background-color: initial;
}

input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
    background-color: ButtonFace;
}

input[type="color" i] {
    background-color: ButtonFace;
}

input[type="color" i]::-webkit-color-swatch {
    background-color: #000000;
}

input[type="color" i][list]::-webkit-color-swatch {
    border-color: #000000;
}e, i

input::-webkit-calendar-picker-indicator:hover {
    background-color: #eee;
}

select {
    background-color: white;
}

===================================


So in Chrome, <input type="button">


    background-color: ButtonFace;
    border: 2px outset ButtonFace;



as for the ButtonFace value, it seems to be defined as 
https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/layout/layout_theme.cc?l=706&rcl=bcfda9cfef7e65ecee20cd15f52f9a390f109923

    case CSSValueButtonface:
      return 0xFFC0C0C0;

which means rgb(192,192,192) to double check on an Android device.




while in Firefox <input type="button">


https://dxr.mozilla.org/mozilla-central/rev/085cdfb90903d4985f0de1dc7786522d9fb45596/mobile/android/themes/geckoview/content.css#125-136

  background-color: var(--form_background);
  border-color: var(--form_border);
  border-radius: var(--form_border_radius);
  border-width: 1px;
  border-style: solid;

which resolves to
https://dxr.mozilla.org/mozilla-central/rev/085cdfb90903d4985f0de1dc7786522d9fb45596/mobile/android/themes/geckoview/defines.css#10

  --form_background: white;
  --form_border: #bfbfbf;
  --form_border_radius: 2px;
Flags: webcompat+
Whiteboard: [webcompat] → [webcompat:p3]
Let me unassign myself here. I don't have the bandwidth for now.
Assignee: kdubost → nobody
Assignee: nobody → dschubert
See Also: → 1546049

See bug 1547409. Migrating webcompat priority whiteboard tags to project flags.

Webcompat Priority: --- → P3
You need to log in before you can comment on or make changes to this bug.