Audio Player Card Broken on Mozilla Firefox on Desktop (But Not Chrome or Safari)

Issue Summary

  • Audio player card’s volume bar shoots way beyond the box when the size is too small, but only on Firefox. (Chrome and Safari work fine.)
  • I expected the volume bar to stay within the box of the audio player’s card.

Steps to Reproduce

  1. Increase the margin through code injection to gh-content
  2. Go to the page in each of the two browsers, Mozilla Firefox and Google Chrome

Setup information

Ghost Version
5.122.0

How did you install Ghost?
Hosted on Magic Pages

Provide details of your host & operating system
Debian Linux

Browser & OS version
Mozilla Firefox 128.11.0 ESR
Google Chrome 137.0.7151.68

As a note, this is when the windows are near and above 640 pixels wide for the website content.

1 Like

First off, I’m guessing you’re using Ghost version 5.121.0, mostly because 5.122.0 hasn’t been released yet.

Secondly, being a Firefox user, I visited your site and saw that the audio cards worked perfectly fine in my browser, Firefox version 139.0.1 (the latest release). I would have guessed the issue is related to your theme, but as it looks fine in my version of Firefox my alternate guess then is that your issue has something to do with Firefox 128.11.0 ESR (which was released two weeks ago, and which you may not have noticed until now). Perhaps try your site out with the latest version of Firefox (if you can).

Which theme? If you switch over to an official theme for a moment, is the problem still there?

It is Source, the current official theme (after Casper became legacy).

I just tried Casper theme and the problem persists.

My host said it was using Ghost 5.122.0, and a message popped up to tell me about an update and to refresh.

I recently tested this on the latest Firefox (non-ESR version) for Windows and saw the same problem.

Thank you for the replies/attention.

1 Like

mind linking it? I can probably give you a little code injection to resolve it, but not without seeing it live, and I don’t have a 5.122 install with audio cards handy today.

Any of the pages under the Articles tag have the same deal. Anything that is primarily written has the audio player with it. Accessibility and all that.

Thank you for any code injection suggestions, but the problem may arise from code injection in the first place. I have the margin set to be wider so that lower-resolution screens will have ample margins. At this point, the cards have to be smaller. The problem surfaces. However, if the window is much smaller, the player correctly puts the volume slider within the card.

The problem only surfaces with Firefox with an artificially higher margin (smaller content area) around 640 pixels. You go much larger, the window is so large that it doesn’t matter that the margin is wider. (The system makes the margin much larger anyway.) You go much smaller, and it works.

Maybe the Ghost page does some compensation when it “expects” a very small screen resolution, but when the resolution is higher, the Ghost page does not do the compensation. The artificially large margin may make this necessary, and Safari and Chrome just are smart enough to apply the fix? I am spitballing here, as I have no idea. I experimented back and forth a lot.

Ahha. I see it. It doesn’t require the browser window to be zoomed at all, just to be between ~640-720px. (I also didn’t see it in Chrome, but it’s there in Firefox, Windows 11.)

Here’s code injection that should fix it:

.kg-audio-card .kg-audio-player-container {
    max-width: calc(100% - 104px)!important;
}

Right now, that container (that holds the right side of the card) is set to 100% width, and something about how firefox is calculating width is causing it to overflow the outer container. Anyway, that /should/ constrain it to the box, because the image is always (as far as I saw anyway) always 80px, plus margins.

Hope that fixes you up! If the error is reproducible /without/ code injection, it’d be great if you’d file it over on Github. Cross-browser compatibility is hard, and while it looks like an easy fix, it won’t get fixed if it isn’t identified. :)

The code injection has no effect. I tried with a Private Browsing Mode window to make sure that cookies/cache were not affecting anything.

If it is relevant, I have found in general that some code injection that worked for Casper does not work with Source and some code that worked for Source does not work with Casper.

I filed bugs on Mozilla Firefox’s compatibility thing and its bug tracker for other problems with the program.

When you say the Github, I presume you mean the Github for Ghost.

Thank you for the suggestion and the code to try out. (I had figured code injection to the card[s] would be the ticket—even though that one didn’t work.) I wonder if this could be related to changes from last year that made the cards look the same everywhere, with the sans serif font that is black on a white background. This is different from the appearance in the editor window (which obeys the theming and colors throughout). That seemed to be an . . . odd decision, but it could relate to some edge cases I hadn’t anticipated. I have no time machine and cannot test this with the old Ghost. Maybe there was a regression. Maybe I found another edge case. :man_shrugging:

I’m not so sure if this is a Ghost bug. Yes, I can see that the audio card on your site has that issue, on Firefox 139.0.1, at those specific widths you mentioned. However, trying out an audio card on Source on my end appears to work perfectly fine (again on Firefox 139.0.1). Have you made any adjustments to Source and/or slipped some code into code injection (which may be interfering with things)?

p.s. Okay, I see that 5.122.0 does actually exist on the tags page, but for some reason not on the releases page.

I have the problem appear because I have extra margin added with code injection.

Under the default margin sizes, this problem does not surface because the opportunities for this problem do not appear when the window resolution is very small or very big.

The problem only comes out when Ghost expects to have a “big” space to draw the post content when the window resolution is big enough and the space for drawing is not big enough. The extra margin that I added makes the available content area smaller than Ghost would otherwise expect.

Why does the box have the volume slider shoot way past the box instead of being clipped or just not rendering? I have no idea.


As for why I add the extra margin . . .

I may want to have the images of this displayed elsewhere, and it is good practice to leave 6.7% as the title safe area around text. We don’t use curved CRT TVs, but many sites still crop the sides a bit and graphical overlays show up, and it is also looks better to have more than 5% of space around text. (Many YouTubers seem to not know about this. I see the Recommended feed on mobile crop out text in thumbnails on various videos.)

Also, it just looks bad to have text run up too close to the sides. The default margin on Ghost is good enough for most purposes, but having a total of 43 pixels on each side for a 640 pixel-wide window works well for screen sharing, broadcasting, and a million other things.


Thank you for resolving that version weirdness. When I later noticed that GitHub only showed 5.121.0 on the Releases page, I wondered if my host had accidentally released a new version a day or two early. A mismatch in tagging releases in GitHub, as you suggest, seems more likely.

That suggests that the issue isn’t so much with any Ghost theme but rather with a shortcoming with your added code. Although Cathy said that “it’d be great if you’d file [the error] over on Github”, that was dependent upon the issue being “reproducible /without/ code injection”. As that’s not the case, you should probably close the issue on GitHub.

Huh. I thought it was working well for me yesterday, but today when I added 150% font zoom, it still isn’t solving the problem, and produces problems with the play button disappearing at some widths. Not good.

GitHub

By the way, despite your suggestion to file a bug on GitHub, it got closed as completed (which, effectively here is won’t fix). I agree with you that it is a compatibility problem because it shows differently in WebKit (Apple Safari) and Blink (Google Chrome, Edge, Opera, etc.) versus Gecko (Mozilla Firefox). Oh, well. I filed with the Mozilla Firefox side for “traditional” bugs and for web compatibility issues. I do not know whose “fault” it is. For all I know, everything here is against standards and Blink and WebKit just choose to do an aesthetically pleasing fix, or Ghost has stumbled upon some proprietary extension or behavior that is not present in W3C standards, CSS 3.0, HTML 5, or Mozilla Firefox. Again, I have no idea.

On the suggested code

The code you offered seems to have an effect once I have reduced the margin addition somewhat.

The volume slider still extended outside of the box—but not by as much. I think the margin I had yesterday of 64 pixels was too much for your suggested code to make an impact.

I played with the pixel number and that had an effect of reducing the overhang in an all-or-nothing manner. Below a threshold = no effect. Above a threshold = some effect.

It is live at the same URL. I played with the percentage, but anything less than 100% only changed the player when the window is very large and made a lot of empty space after the progress slider and the volume slider but no effect on the player card when the viewing window was smaller.

When I jacked up the pixel count in your code, Cathy, it only affected the title of the audio card and the width of the title text in small window mode and made the sliders leave too much white space within the card when in big window mode.

The code is live, and I am playing with it off and on.

Something I noticed

Even after the threshold has been hit and the volume slider still juts out beyond the bounds, adjusting the pixel count in your suggestion makes the screenshot tool built into Mozilla Firefox count a smaller box for the title text of the audio player and a smaller box for the volume slider. (When using Mozilla Firefox’s built in screen capture tool, you click and drag to make a box to get a custom part of the page; you can grab the whole visible page; you can grab the whole page (including the parts where you’d have to scroll to see them); or you can grab certain pieces of the page. If you click on a given object, then Firefox will give you the size of the region of that thing you clicked on.

Code

The code is currently thus, and it has no negative impacts on the look in big window mode. (Sort of a victory)

<style>

    .kg-audio-card .kg-audio-player-container {
        max-width: calc(100% - 92px)!important;
    }

@media screen and (min-width: 640px) {
    .gh-navigation-actions {
        margin-left: 23px;
        margin-right: 23px;
    }
}

@media screen and (min-width: 640px) {
    .gh-navigation-brand {
        margin-left: 23px;
        margin-right: 23px;
    }
}

@media screen and (min-width: 640px) {
    .gh-article-header {
        margin-left: 13px;
        margin-right: 13px;
    }
}

    :root {
        --content-width: 720px;
    }

    .gh-article-image {
        max-width: 720px;
        grid-column:main;
	}

    .gh-content {
        font-size: 20px;
    }

@media screen and (min-width: 640px) {
    .gh-content {
        margin-left: 13px;
        margin-right: 13px;
    }
}
    .gh-comments {
        margin-left: 13px;
        margin-right: 13px;
    }
}

@media screen and (min-width: 640px) {
    .gh-container {
        margin-left: 23px;
        margin-right: 23px;
    }
}

@media screen and (min-width: 640px) {
    .gh-footer-bar {
        margin-left: 44px;
        margin-right: 44px;
     }
}

</style>

The total visible margin for all text and image elements on each page when in “small window mode” is for 43 pixels on the left and on the right.

Thank you

Thank you for your help. I am very low on money and have been out of work for several months. I know you work for $ as a freelance coder/developer on Ghost. I cannot properly hire you—only hope that the experimentation here is useful because it is on a live website that is not your own.

. . . And all of this may be for naught if Ghost 6.0 overhauls everything. I can only pray that the work here carries over since it is the current default theme (Source), which should (I hope) still be the standard for the near future.

Perhaps the best way for me to adjust left and right margins (the default is 20 pixels for some elements and 30 pixels for others) is in the theme files themselves, but unless I self-host, I can only modify CSS. It is useful, but it is “hacky.” I am not that surprised to run against this issue.

1 Like

I appreciate you sharing your learnings so that others can benefit! :)

Don’t worry about it! I don’t expect to get paid for hanging out on the forum.

With either the update to Ghost 5.123.0 or 5.125.0 (or a Firefox update?), the code works completely without ill effects that I can find:

    .kg-audio-card .kg-audio-player-container {
        max-width: calc(100% - 92px)!important;
    }

But without the code, volume slider overshoots the box.

With this code, it works, but it should “just work” by default, and I still consider this a bug. You shouldn’t have to inject special code for proper display or have different browser experiences. Whose bug it is—Firefox’s or Ghost’s—I don’t know.

1 Like