Bootstrap 3 Destroys Default Andorid Browser Video Controls

Well despite every single link I could find on Google saying this is now fixed in Bootstrap 3 it really isn’t!

So here is the offending code on line 1669 of bootstrap.css v3.1.1!

input[type="range"] {
display: block;
width: 100%;

Basically the video position scrubber bar was just 0px in width causing all buttons to be bunched together and a new volume slider to appear…. pretty damn random!! I hate Android and video by the way, thought I would just get that out there.

Now no matter what combination of display I tried I could not override this setting. The only way to fix this was by editing the core css file and removing display: block; completely.

Am I the only one who tested video in the default Android browser when using Bootstrap 3? Evidently so according to Google… Man what a waste of 3 hours of trial and error!