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

scottjehl / Device-Bugs

Just a collection of quirks and issues that occur on browser platforms (particularly those unlikely to update)

864 stars 19 forks source link

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

Open kpeatt opened 11 years ago

kpeatt commented 11 years ago

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.

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