Header bar got drunk on Firefox

Since today on Firefox, when we scroll on a topic, the header bar has a weird alignment.

I’ve tried on Chrome to compare, and it works well.

1 Like

This is a topic for @neil

I can also repro on Mobile Safari, but the alignment is different.

FWIW On my end (mobile Safari) it seems the logo is crammed to the left.

This happens on Chrome on Android too (Moto X 2014 - Android 6.0)

Yep, I got the same in Firefox, even here… It’s only when you’re scrolled a bit down inside a post…

I reverted the change for now @neil

2 Likes

Closing this as change was reverted

1 Like

Hmm. Well I tried! All the browsers and devices I had looked fine. I did forget Firefox though. Even IE10 and IE11 were consistent with webkit browsers. Firefox is the new IE confirmed.

Both flexbox and display: table have proven to be fragile solutions. I’m the second person to take 5 attempts at this now, so who volunteers to be next? :stuck_out_tongue:

3 Likes

What is the problem that you are trying to solve?

2 Likes

Vertical centering of the logo in the header, also working with text-only logos.

You can do it by setting the line-height on the <a> element that contains the logo to equal to the max-height of the logo. That should work for all cases except for when the logo max-height is changed in a customization.

<a class="logo-link" data-auto-route="true" href="/">
  <img id="site-logo" class="logo-big" src="https://assets-meta-cdck-prod-meta.s3.dualstack.us-west-1.amazonaws.com/original/3X/9/d/9d543e92b15b06924249654667a81441a55867eb.png" alt="Discourse Meta">
</a>
a.logo-link {
    line-height: 40px;
}

I’ve reduced the size of the logo here and but it stays centered.

4 Likes

I can’t repro this bug on my firefox broser, is the @simon solution the correct one?

Yeah, that is what I did :slight_smile:

4 Likes