Site header and footer not displaying on mobile Firebox

Fill out the following bug report template with as much detail as possible!

Are you sure this is a bug? If you just need help, post in the developer help category. If it’s a feature request, head to the ideas category.


Issue Summary

I received a note on social media from a reader who says that the site header image isn’t showing for him on mobile (I don’t know his details yet). I checked on iOS 18.6.2 in Firefox and Safari

  • Safari: top menu, header (publication cover and header text), current article list, and footer (sign-up call to action) all correctly display
  • Firefox: top menu and current article list show only

I tried Chrome on a Google Pixel (not sure of Android version) and it looked fine.

Steps to Reproduce

  1. Publish a blog
  2. View on mobile Firefox on iOS

Setup information

Ghost Version
6.0.7-22-gf21a3e87+moya

Node.js Version
NA; using ghost.io hosting

Browser & OS version
Current known issue with iOS 18.6.2 running Firefox 142.1 (60552)

Relevant log / error output
Copy and paste any relevant log output. Use backticks to format this into code.

Which theme are you using? Any chance it’s Source?

Source hides certain things on the home page if you’re logged in as a member. If you’re checking from two different browsers it might be that you’re logged in on one of them and logged out in the other.

1 Like

It is indeed Source v1.5.0. I’m confused about the implications of what you’re saying.
I was logged in as the admin, but logging out didn’t fix the problem.
As well, as I mentioned, it was reported by a reader.

When you say “logged in as a member” what do you mean by that?
A subscriber? A person who has a Ghost account of their own? Is this different than being logged in as the admin?

add a CSS rule that forces Firefox iOS to render the header/footer properly, since it sometimes hides background-image and flex containers.

.site-header, .site-footer {
display: block !important;
background-attachment: scroll !important;
-webkit-overflow-scrolling: touch;
}

I appreciate the code advice, thank you. I opened my mobile browser today and the header and footer are displaying now. :person_shrugging:

Yesterday, I was setting the og:image tag through the Facbook Card and X Card admin tools, because I wanted to see if those would also show up in BlueSky, Mastodon, and Discord. Could that have triggered something to start working? Or, perhaps my email request for support was addressed?

I’m bookmarking this discussion in case it comes up again and I’ll give your solution a shot.

Ghost has the concept of member:

Opposed to staff users:

Members can be subscribed to a newsletter, but don’t have to be (which is why I am avoiding the word “subscriber” – but that’s essentially what you mean, yes).

So, yes:

Being logged in as a member in the frontend of your site is different than being logged in as an admin.

No, for this particular situation, this is absolutely not the solution.

I would assume that you’re not logged in as a member anymore now.

Well, I guess that’s the case then. I keep a completely separate account for admin vs. member, and really have no memory of logging in or out on mobile with the member account. But maybe I did in the early days of setting things up and was still “signed in.” :person_shrugging: Now, if I explicitly use the member account I can make the header/footer disappear/reappear at will.

For a subscriber to the blog it makes a kind of sense, since I don’t need them to be prompted to sign up. But if members who are not subscribers aren’t seeing it, then that would be a bug; those people should have a call to action presented.

This also says to me that the blog post preview is broken. I can view the site as “free member” and it shows the header/footer. I also cannot view the site as “Ghost member, but non-subscriber” which is a use case I haven’t yet checked.

It’s frustrating to see the visual identity for the site being hidden for Ghost members, though. Do you have any suggestions for reinjecting the site banner and header text for members when they view the main site (list of blog posts)?

If you’re comfortable editing the theme and on a plan that allows it, it is not terribly difficult to alter the logic in Source so that it always shows the header image, although it doesn’t make sense to show the subscribe box – that’s specifically for making an account, and someone who already has an account but isn’t subscribed to the newsletter would need a different call to action there, as typing their email address would not make them a newsletter subscriber if they were already a member. But if you were editing the theme, you could add a “hey, you’re not currently subscribed to the newsletter, click her to make that happen” branch to the logic.

If you don’t want to or can’t edit the theme, consider a different theme. Edition has a subscriber box that becomes a static banner, for example: https://edition.ghost.io/

1 Like

I’m comfortable modifying the theme through the Code Injection but I don’t think I have any access to editing the theme with my Ghost-hoted site. Edition looks nice. Is there a way to test themes before comitting them to the live site?

When you look at a theme in the theme gallery in your Ghost admin, you’ll see a preview.

For a proper “look and feel” you can activate the theme and have a look around. You could then always switch back to Source.

1 Like

Trying to change to Edition to give it a whirl.
Validation (FieldIsRequired) failed for ref error pops up. I don’t know what this indicates. :thinking:

Ask the user to perform a hard refresh on Firefox iOS by pulling down sharply on the page. I encountered the same error on one of my client’s website and after a long while a found that it is not a technical error.

(MOD: spurious link removed)

1 Like

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.