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

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

Comments

Projects
None yet
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

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Jul 5, 2012

Member

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"]

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

This comment has been minimized.

Show comment
Hide comment
@roryf

roryf 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.

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

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Jul 5, 2012

Member

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.

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

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Aug 12, 2012

Member

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

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 pushed a commit to npmcomponent/necolas-normalize.css that referenced this issue Jan 6, 2014

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment