New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Android default video controls are broken #1235

Closed
sviatco opened this Issue Oct 10, 2012 · 9 comments

Comments

Projects
None yet
4 participants
@sviatco

sviatco commented Oct 10, 2012

Native android video controls styling seems to be broken by boilerplate.

This issue is reproducible on a real device with ICS and android emulator.

I have removed this line
button, input[type="button"], input[type="reset"], input[type="submit"], [role="button"] {-webkit-appearance: button; }

...and now it looks like fine

Could any one tell me what -webkit-appearance: button is for? I'd like to commit this change, although I'm not sure if it won't break anything.

Thank you,
Sviatoslav

@necolas

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Oct 10, 2012

Member

We don't have that line of code in v4 or master. Please can you try updating the CSS and report back.

Member

necolas commented Oct 10, 2012

We don't have that line of code in v4 or master. Please can you try updating the CSS and report back.

@Inkdpixels

This comment has been minimized.

Show comment
Hide comment
@Inkdpixels

Inkdpixels Oct 12, 2012

Its still there in v4 - he just cut down the code to the affected declaration.

https://github.com/h5bp/html5-boilerplate/blob/master/css/normalize.css#L407

Inkdpixels commented Oct 12, 2012

Its still there in v4 - he just cut down the code to the affected declaration.

https://github.com/h5bp/html5-boilerplate/blob/master/css/normalize.css#L407

@sviatco

This comment has been minimized.

Show comment
Hide comment
@sviatco

sviatco Oct 12, 2012

@Inkdpixels thank you for clarification. Indeed I cut the string down.

"-webkit-appearance: button;" destroys native video controls.

sviatco commented Oct 12, 2012

@Inkdpixels thank you for clarification. Indeed I cut the string down.

"-webkit-appearance: button;" destroys native video controls.

@necolas

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Oct 12, 2012

Member

This code…

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
[role="button"] 

…doesn't exist anywhere in normalize.css. This code does:

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 *  ...
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"]

So let me know if the code from normalize doesn't in fact work around this Android bug.

Member

necolas commented Oct 12, 2012

This code…

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
[role="button"] 

…doesn't exist anywhere in normalize.css. This code does:

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 *  ...
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"]

So let me know if the code from normalize doesn't in fact work around this Android bug.

@drublic

This comment has been minimized.

Show comment
Hide comment
@drublic

drublic Oct 14, 2012

Member

I've tested this on a Samsung Galaxy S with Android 2.3 and the test I have created for audio. It works fine for me. Please see this "screenshot" for further proof.
Same goes for video (test).
As I said this is on Android 2.3 (!).

On Android 4 I cannot test on an actual device at the moment. But the emulator for a Galaxy Nexus with Android 4.0.3 shows no bug with my test for video (please see this screenshot) or audio.

Versions prior Android 2.3 do not fully support HTML5 video or audio (CanIUse).

Is it possible that you are using an old version of normalize.css that does not prevent the Android bug yet?
Please provide a test-case with the bug so that we can reproduce it. For now reproducing is not possible for me though.

Member

drublic commented Oct 14, 2012

I've tested this on a Samsung Galaxy S with Android 2.3 and the test I have created for audio. It works fine for me. Please see this "screenshot" for further proof.
Same goes for video (test).
As I said this is on Android 2.3 (!).

On Android 4 I cannot test on an actual device at the moment. But the emulator for a Galaxy Nexus with Android 4.0.3 shows no bug with my test for video (please see this screenshot) or audio.

Versions prior Android 2.3 do not fully support HTML5 video or audio (CanIUse).

Is it possible that you are using an old version of normalize.css that does not prevent the Android bug yet?
Please provide a test-case with the bug so that we can reproduce it. For now reproducing is not possible for me though.

@Inkdpixels

This comment has been minimized.

Show comment
Hide comment
@Inkdpixels

Inkdpixels Oct 15, 2012

Also tested this on Android 4.0.4 with my SGS 2 - Audio buttons are looking as they should.

Inkdpixels commented Oct 15, 2012

Also tested this on Android 4.0.4 with my SGS 2 - Audio buttons are looking as they should.

@sviatco

This comment has been minimized.

Show comment
Hide comment
@sviatco

sviatco Oct 16, 2012

My video tag is a little bit different:

 video poster="url" src="url" controls

I know it's the same thing as with source attribute, but still...

I did not specify the type attribute, but it was definitely reproducible with mp4.

I'll give this issue another try with the static page you've provided us with.

sviatco commented Oct 16, 2012

My video tag is a little bit different:

 video poster="url" src="url" controls

I know it's the same thing as with source attribute, but still...

I did not specify the type attribute, but it was definitely reproducible with mp4.

I'll give this issue another try with the static page you've provided us with.

@necolas

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Oct 16, 2012

Member

You need to reproduce the cause with a reduced test case, using the latest code from this repo, because the CSS you shared is not part of this project.

Member

necolas commented Oct 16, 2012

You need to reproduce the cause with a reduced test case, using the latest code from this repo, because the CSS you shared is not part of this project.

@necolas

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Oct 20, 2012

Member

Thanks for testing things out guys. Planning to close this one unless the OP shows it is still a problem.

Member

necolas commented Oct 20, 2012

Thanks for testing things out guys. Planning to close this one unless the OP shows it is still a problem.

@necolas necolas closed this Oct 22, 2012

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment