Skip to content

-webkit-appearance: button; hides <audio> controls on Android 4.0.3 #121

Closed
roryf opened this Issue Jul 5, 2012 · 4 comments

2 participants

@roryf
roryf commented Jul 5, 2012

Combination of the selector input[type="button"] and -webkit-appearance: button; causes the native <audio> controls to appear with no icons on Android 4.0.3.

Line 166 of style.css:

button, input[type="button"], input[type="reset"], input[type="submit"], [role="button"] { cursor: pointer; -webkit-appearance: button; }

Removing either selector or rule fixes the issue.

@necolas
H5BP member
necolas commented Jul 5, 2012

Thanks! Has this Android bug been reported? Author CSS should have no effect (certainly not this one) on shadow DOM element styles.

Please could you let me know the result of an additional test? Use this selector instead: html input[type="button"]

@roryf
roryf commented Jul 5, 2012

Reported it here: https://code.google.com/p/android/issues/detail?id=34301

Yes, adding html to the selector fixes the issue.

@necolas
H5BP member
necolas commented Jul 5, 2012

Thanks. This is an old webkit bug that was fixed in normalize.css, and unfortunately Android releases seem to be way behind in the versions of webkit they use. Will have to add this fix back in.

@necolas
H5BP member
necolas commented Aug 12, 2012

Should be fixed by a recent commit that pulls in the latest version of normalize.css

@necolas necolas closed this Aug 12, 2012
@npmcomponent npmcomponent pushed a commit to npmcomponent/necolas-normalize.css that referenced this issue Jan 6, 2014
@necolas necolas Reintroduce fix for WebKit audio/video control bug
This fix was first introduced to deal with Chrome < 13 destroying the
appearance of native `audio` and `video` button controls when
`-webkit-appearance` is set on `input[type="button"]`. See #20

Android 4.0.* seems to use a version of WebKit that contains this bug.
See: h5bp/mobile-boilerplate#121

...so the fix needs to be reintroduced.
79b3d21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.