scottjehl/Device-Bugs

Android 4.0+ leaks styles into Shadow DOM if -webkit-appearance: none; is set.

Opened this issue · 0 comments

kpeatt commented

Summary:

Setting -webkit-appearance-none on inputs globally will cause any styles applied to leak into the Shadow DOM on Android browser 4.0+.

input {
  -webkit-appearance: none;
  background: red;
}

Platforms:

  • Android 4.0+ (native browser, not Chrome)

How to reproduce:

  1. Apply -webkit-appearance: none styling to the input selector.
  2. Set another style like background: red; on that selector.

Reduced Example:

http://codepen.io/mobify/full/JxEoB

Workarounds:

Space anything you're applying -webkit-appearance: none on into html or body.