Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

When styling the Firefox html5 audio player's width (making it less wide), the player will start, but cannot be stopped by clicking the appropriate place.

  • 8 replies
  • 1 has this problem
  • 3 views
  • Last reply by cor-el

more options

When I style the Firefox audio player to make it less wide (i.e., audio { max-width:200px;}), the player will start when the proper place is clicked. However, the player cannot be stopped by clicking the appropriate place.

The Firefox audio player works fine (stops and starts) without the applied style.

When the style is applied, all other standards-compliant browsers operate properly.

The Firefox audio player has the problem on Windows XP and on Linux.

Thanks.

~George

When I style the Firefox audio player to make it less wide (i.e., audio { max-width:200px;}), the player will start when the proper place is clicked. However, the player cannot be stopped by clicking the appropriate place. The Firefox audio player works fine (stops and starts) without the applied style. When the style is applied, all other standards-compliant browsers operate properly. The Firefox audio player has the problem on Windows XP and on Linux. Thanks. ~George

All Replies (8)

more options

Did you try to adjust the width to see when the change happens?

Do you have a link?

more options

Thanks Cor-el.

At 200px max-width, no amount of clicking will stop the playing.

At 210px max-width, clicking repeatedly will SOMETIMES stop the play of SOME of the audios.

At 220px max-width, SOME audios will stop with one click, SOME not. Repeated clicking on the ones that don't stop eventually causes them to stop.

At 230px max-width, all operate as they should.

Same behavior was noted in both Windows XP and Linux.

Link is http://htelc.org/bulletin.php, for which current max-width is set at 200px.

Thanks.

~George

more options

I noticed an additional thing. When max-width is set to 200px, and a selection finishes playing, it cannot be replayed.

more options

I see that the player image is moved downward and that you need to click higher to make the controls work. You can observe that during the loading stage that shows the spinning icon. The smaller you make the player the greater that difference gets and with a width of 200px you can just click on the upper few px at the top on the player an further up to pause and play. Mute only work as long as you click the player, so not much space left for that.

Looks like a bug to me, because that height is corrected if I hide the controls and make them visible again with the DOM Inspector.
The default width for the player seems to be 300px and that still makes the player higher when you click play to start.

Looks like this bug (regression)

  • Bug 620317 – Audio controls sometimes enlarge and retain size unnecessarily

(please do not comment in bug reports; you can vote instead)

more options

Cor-el,

Thanks VERY much for looking at this. Until the bug is fixed, I'll use max-width:230px, which will work for 1024 x 768 resolutions, but will break 800 x 600s.

Can you tell me how to monitor the progress of work on the bug?

Your work is greatly appreciated!

~George

more options

You're welcome

You can register on the Bugzilla site and add yourself to the CC list of a bug to get mails when there is activity.

more options

Just a followup in hopes it will assist in the fixing. I notice that, at width:230px, there is still a problem with where to click to stop and start the players. At times, clicking (with the tip of the mouse pointer) directly over the arrow or the vertical bars does not perform the stop or start, but if the tip of the mouse pointer is moved slightly off the arrow or vertical bars, the player will stop or start.

Hope this helps.

~George

more options

If you open Firefox > Web Developer > Inspect and click a player then you can see what the dimensions are and where you can click and can't click.