1317911 - CSS link interferes with Javascript and HTML5 Video Control

Status: UNCONFIRMED

(Toolkit :: Video/Audio Controls, defect)

Description

[Kurt]

Attachment: page designed to diagnose the behavior, omitting the Bootstrap structure of the overall site.

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:50.0) Gecko/20100101 Firefox/50.0
Build ID: 20161104212021

Steps to reproduce:

I added some javascript code to a page containing a HTML5 <video> object in order to set the default playback volume. 

Please see: [ http://ettingerengineering.com/newsite/video_test.html ]


Actual results:

The page does not render the modified volume in the video controller. I initially thought that the javascript failed, but the volume IS modified, but the controller does not reflect the change. The volume indicator does not respond to mouse or keyboard input, but the volume DOES change. 

This behavior appears if there is any <link> command to any CSS file present. Even if to a null source  [ href=" " ] 


Expected results:

The volume indicator should reflect the changed initial volume (30%), and indicate keyboard or mouse input.

I discovered when a <link> command to any CSS file is deleted or commented out, the rendering works correctly. Also works correctly in Safari and Crome (Mac)

Comment 1

[Loic]

I don't really understand the issue, on Win 7, I see the native controls and if I change the volume of the video, it's reflected in the controls.

Comment 2

[Kurt]

(In reply to Loic from comment #1)
> I don't really understand the issue, on Win 7, I see the native controls and
> if I change the volume of the video, it's reflected in the controls.

It would appear that this maybe a Mac-Specific FF bug.

Please see: [ http://www.ettingerengineering.com/newsite/images/misc/firefox_display_bug.jpg ]

The link is to a pair of screen clips - even though the javascript *functions* – the page *displays* the left screen clip, the volume frozen at 100%, what SHOULD show is the on the right, reflecting the JS instruction. 

When the <link type="text/css"... code is removed or commented out, it displays properly.

Comment 3

[Kurt]

Attachment: Screen clips of the bug (left) and correct display result.(right)

Comment 4

[Loic]

Ah ok, the link you provided in comment #0 is the testcase (with the issue). I thought it was just a demo page you used to produce your own testcase.

Indeed, with http://ettingerengineering.com/newsite/video_test.html I can't change the volume. The control is stuck.