Closed Bug 502892 Opened 15 years ago Closed 13 years ago

disable broken html5 volume slider (due to it disappearing outside element rect)

Categories

(Toolkit :: Video/Audio Controls, defect)

Product:
Toolkit
Component:
Video/Audio Controls
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

()

Status:
VERIFIED FIXED
Milestone:
mozilla6
Tracking Flags:
Tracking Status
firefox5 --- fixed
status2.0 --- wontfix
status1.9.2 --- wanted

People

(Reporter: steven_rowat, Assigned: fryn)

References

(Depends on 1 open bug)

Details

(Keywords: ux-control, Whiteboard: proper fix blocked by 513876)

Attachments

(3 files, 1 obsolete file)

Animation of current problem: volume closes when user mouses over (made by redditor DoListening)
233.09 KB, image/gif
Details
re-uploaded j.j.'s testcase
149 bytes, text/html
Details
hg export of patch to hide non-functional volume slider [r=dolske]
2.48 KB, patch
jpr
: approval-mozilla-aurora+
dveditz
: approval2.0-
dveditz
: approval1.9.2.18-
Details | Diff | Splinter Review 
User-Agent:       Mozilla/5.0 (Macintosh; U; PPC Mac OS X 10.4; en-US; rv:1.9.1) Gecko/20090624 Firefox/3.5
Build Identifier: Mozilla/5.0 (Macintosh; U; PPC Mac OS X 10.4; en-US; rv:1.9.1) Gecko/20090624 Firefox/3.5

The knob on the volume slider in the audio/video controller is not visible if the height of the audio/video tag is set less than the slider requires to expand upwards.

The volume change is still working - moving the mouse up and down still changes the volume of the audio. But no user will understand this, because the knob that indicates the current audio volume disappears. Quite disturbing.

Reproducible: Always

Steps to Reproduce:
1.set audio or video tags and view in FF3.5
2.use style to set height to, say, 40px.
3.load an audio file, and click on the volume button. Slider extends upwards but no knob is visible, because the volume is at max. 
4. Mousing around will show that the knob disappears at the edge of the 40px, the top of the tag box area.



Tried giving z-index=0 to the audio/video tag, but that didn't help.
Right, I am going to confirm this but I am unsure if this is an actual bug. Why would you set a height so small (40px) on the movie in the first place? I tested on 

Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1) Gecko/20090624 Firefox/3.5 with the following markup.

<video controls style="height: 40px">
   <source src="http://tinyvid.tv/file/7c1wpqgmjweu.ogg" />
</video>

The only way to get see the knob on the volume slider is to either mute or click at a low volume area on the slider.
Status: UNCONFIRMED → NEW
Ever confirmed: true
OS: Mac OS X → All
Hardware: PowerPC → All
Component: General → Video/Audio
Product: Firefox → Core
QA Contact: general → video.audio
Version: unspecified → Trunk
(In reply to comment #1)
> Right, I am going to confirm this but I am unsure if this is an actual bug. Why
> would you set a height so small (40px) on the movie in the first place?

Because I'm using audio, not video. It just happens to work the same for both.

So, using audio, I have no reason to have all that space blocked above the controller - except for this bug.

More specifically: on the site I'm working on, I had planned to put the (audio) controller near the top of the page, but had to move it to the bottom because the knob disappears. 

And the same thing would happen anywhere on the page it was placed, if it was closely below another HTML element.

Note also possibly related (but different) bug 502122 where the slider itself goes right up off the page if the audio/video controller is placed at the top.

So between the two of them, there's serious annoyance in trying to use the audio controller. Which is a shame because it's such a game-changer to have them available at all - they'll be wonderful. If they work right. :-) .
Assignee: nobody → mano
Status: NEW → ASSIGNED
Whiteboard: [eta 9/8]
I'd like to add another (to me major) situation where this bug is cropping up: I'm displaying stacked audio controllers as returns from a search page that allows a user to search among a database of recordings. The user may see 20 or 30 or more controllers stacked (with identifying text for each), one per line, in the results.

At a normal reading line-height, eg., about 1.5em, the controllers don't show any volume control at all. It's as if the volume slider just doesn't exist.
Whiteboard: [eta 9/8] → holded by 502892
Depends on: 513876
Whiteboard: holded by 502892 → holded by 513876
Component: Video/Audio → Video/Audio Controls
Product: Core → Toolkit
QA Contact: video.audio → video.audio
Version: Trunk → unspecified
Volume slider also does not work properly if it is at the top of the page.
Make a page with the default <audio> tag and nothing else in the <body>. Hovering over the volume control sends the slider behind the tab bar in the Firefox UI.
I'm attaching an animation of the problem in action.  Mano, are you the right person to work on this? Dup bug 533201 was assigned to Frank.
Keywords: ux-control
Whiteboard: holded by 513876 → blocked by 513876

    
    

    
  


  
Exposing completely broken UI is worse than no UI in my opinion. (See www.reddit.com/r/WTF/comments/gdgba/firefox_you_asshole/ ) Let's hide the slider altogether on audio-only elements for now. Landing this patch should not close the bug. We still need a working volume control. I'm also working on a patch for that.
Assignee: mano → fryn

        Attachment #522598 -
        Flags: review?(dolske)

    
    

    
  
> hide non-functional volume slider for now

This is better than nothing and needs to be done for Fx 3.6 as well.

          status1.9.2:
          --- → ?
Version: unspecified → 1.9.2 Branch

    
    

    
  
This isn't 3.6-only, so let's keep it Version: Trunk.
Version: 1.9.2 Branch → Trunk

    
    

    
  
There was an interesting suggestion some time ago by an user in bug 489017 that is worth thinking about, even because it may simplify the problem. From what I have understood, the volume control disappears when the mouse goes out the "mediaControlsFrame". Making it horizontal would solve both this problem and the one in Comment 5. Another solution could be to show it horizontal in audio, and to make it vertical in video.

The only correction I would suggest in bug 489017 mockup is to set for the volume slider an absolute width rather than a percentage (imagine a 300px volume slider in a 1280px wide video!)

    
    

    
  
Comment on attachment 522598 [details] [diff] [review]
hide non-functional volume slider for now

Yeah, let's do this. I guess leave this bug open pending a proper fix? Or maybe just call this fixed, and open a new bug for <audio> volume control with the alternate controls we discussed?

        Attachment #522598 -
        Flags: review?(dolske) → review+

    
    

    
  
(In reply to comment #14)
> Or maybe
> just call this fixed, and open a new bug for <audio> volume control with the
> alternate controls we discussed?

Let's do this. It seems like a proper fix, e.g. bug 513876, is unlikely to happen.

Unfortunately, my patch doesn't fix <video> elements with a height < ~200px. /sigh

I just filed bug 649490 for the alternate controls, which would also solve the tiny <video> element problem.
Whiteboard: blocked by 513876 → proper fix blocked by 513876

    
  
Blocks: 649490
Keywords: checkin-needed
Summary: audio/video HTML5 tags, knob on volume slider disappears outside tag height → disable broken html5 volume slider (due to it disappearing outside element rect)

    
    

    
  
Pushed.

http://hg.mozilla.org/mozilla-central/rev/0acacb7e7916

Will be in Firefox 6.

There's no technical barrier from pushing this to Firefox 3.6, 4, or 5 too, but it requires convincing release drivers.

          status2.0:
          --- → ?
Keywords: checkin-needed
Target Milestone: --- → mozilla6

    
    

    
  
Forgot to mark this fixed.
Status: ASSIGNED → RESOLVED
Closed: 13 years ago
Resolution: --- → FIXED

    
    

    
  
Good to see that taken care of. Of course it would have been better if the slider was fixed rather than remove it, but I guess Firefox does 10% of fixes while the community does 90%.

    
    

    
  
(In reply to comment #19)
> Good to see that taken care of. Of course it would have been better if the
> slider was fixed rather than remove it, but I guess Firefox does 10% of fixes
> while the community does 90%.

How many fixes have you done?

    
    

    
  
(In reply to comment #17)
> There's no technical barrier from pushing this to Firefox 3.6, 4, or 5 too, but
> it requires convincing release drivers.

Couldn't you just ask for approval?

    
  

        Attachment #525514 -
        Flags: approval2.0?

        Attachment #525514 -
        Flags: approval1.9.2.18?

    
  

        Attachment #525514 -
        Flags: approval-mozilla-aurora?

    
    

    
  
Dao, thanks for setting the flag. I forgot that this landed after the branch.

    
    

    
  
(In reply to comment #20)
> (In reply to comment #19)
> > Good to see that taken care of. Of course it would have been better if the
> > slider was fixed rather than remove it, but I guess Firefox does 10% of fixes
> > while the community does 90%.
> 
> How many fixes have you done?

Let's not start trolling. Unless you're from Firefox, I actually praised the community, not dissed it. I am a regular user who is not proficient with Firefox code, but reports the bugs found. I still respect the fact that you have taken this matter in your hands, and at least removed the problem. That is already something nice.

    
    

    
  
I think I have to second Vitaliy here:

These Bug isn't fixed, that's a mere workaround (for which i am thankfully), These Bug existed for month and the best we could think of is to remove the slider?!

Why not make the slider horizontally as proposed (e.g. Youtube)? Can't be much harder than this if statement Frank inserted.

    
    

    
  
(In reply to comment #25)
> These Bug isn't fixed, that's a mere workaround (for which i am thankfully),
> These Bug existed for month and the best we could think of is to remove the
> slider?!

We've thought of better.

> Why not make the slider horizontally as proposed (e.g. Youtube)? Can't be much
> harder than this if statement Frank inserted.

See bug 649490. Patches are welcome.

    
  

        Attachment #525514 -
        Flags: approval-mozilla-aurora? → approval-mozilla-aurora+

    
    

    
  
Pushed to mozilla-aurora:
https://hg.mozilla.org/mozilla-aurora/rev/74be58c904f1

Let me know if other flags need to be updated.

          status-firefox5:
          --- → fixed
Target Milestone: mozilla6 → mozilla5

    
    

    
  
Gavin explained to me that "Target Milestone should be set to the first trunk version with the fix".
Target Milestone: mozilla5 → mozilla6

    
    

    
  
Comment on attachment 525514 [details] [diff] [review]
hg export of patch to hide non-functional volume slider [r=dolske]

Doesn't fit the criteria for branch releases, not approved.

        Attachment #525514 -
        Flags: approval2.0?

        Attachment #525514 -
        Flags: approval2.0-

        Attachment #525514 -
        Flags: approval1.9.2.18?

        Attachment #525514 -
        Flags: approval1.9.2.18-

    
  
No longer blocks: 649490

    
  
Depends on: 658096

    
    

    
  
Mozilla/5.0 (X11; Linux i686; rv:6.0) Gecko/20100101 Firefox/6.0 - beta 3

Verified issue on WinXP, Win7, Ubuntu 11.04 x86 and Mac OS X 10.6 using the following steps:
 1. Opened http://tinyvid.tv/file/7c1wpqgmjweu.ogg
 2. Played with the volume control

Everything is in order - setting status to Verified Fixed.
Status: RESOLVED → VERIFIED

    
    

    
  
(In reply to comment #30)
> Mozilla/5.0 (X11; Linux i686; rv:6.0) Gecko/20100101 Firefox/6.0 - beta 3
> 
> Verified issue on WinXP, Win7, Ubuntu 11.04 x86 and Mac OS X 10.6 using the
> following steps:
>  1. Opened http://tinyvid.tv/file/7c1wpqgmjweu.ogg
>  2. Played with the volume control
> 
> Everything is in order - setting status to Verified Fixed.

??! did u read the Bug? Video always worked. It's the audio that's **** up

    
    

    
  
Mozilla/5.0 (X11; Linux i686; rv:6.0) Gecko/20100101 Firefox/6.0
(In reply to comment #31)
> (In reply to comment #30)
> ??! did u read the Bug? Video always worked. It's the audio that's **** up

That is why I verified the volume control - to ensure that there are no problems with the audio controls.

    
    

    
  
Oh, please, man. He meant the <audio> element, which is effectively broken. But the issue does occur on too small <video> elements too. Please read the bug before closing it.

    
    

    
  
(In reply to George Carstoiu from comment #32)
> That is why I verified the volume control - to ensure that there are no
> problems with the audio controls.

It's not the audio controls on <video> content that are the problem: it's the audio controls on <audio> content. Try embedding http://www.vorbis.com/music/Epoq-Lepidoptera.ogg in an audio tag into any page. For example, try the following on this page:

javascript:void((function(){ var audio = document.createElement("audio"); audio.controls = true; document.getElementById("comment").parentNode.appendChild(audio); audio.src = "http://www.vorbis.com/music/Epoq-Lepidoptera.ogg"; })());

See if the audio controls work for you in that case.

    
    

    
  
(In reply to David from comment #34)
> See if the audio controls work for you in that case.

Particularly, try to adjust the volume using the control built into the <audio> tag. 

[Sorry for double-comment; realized after posting that I might not have been entirely clear.]

    
    

    
  
http://en.wikipedia.org/wiki/Israel_Kamakawiwo%CA%BBole
http://en.wikipedia.org/wiki/Israel_Kamakawiwo'ole
(Not sure which one of those links will actually work. I'm not a fan of when links are re-formatted from apostrophes and whatnot to symbols.)

Anyway, I tried to adjust the volume in that audio clip and didn't get a volume slider. It went from "on" to "mute" with no slider option.

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: