Blue line above banner logo

I think this has started in the last 24 hours or so. I’m seeing a blue line above the banner logo…

I first noticed this on my forum but it’s repeatable on meta. I only see it when using Edge browser. It’s not there in Firefox or Chrome. It’s also only visible on the mobile browser. The desktop version of Edge doesn’t show it.

I upgraded to the latest Discourse code yesterday but I don’t know if it started appearing immediately after that or if there’s been an Edge update in the last 24 hours too.

Edit: If I view the page as a Desktop site on the mobile browser it’s still there. I kind of expected that but it was worth trying once I thought about it.

I guess pages are loading so fast that I only ever see the completed bar. I assume it’s not compatible with Chrome or Firefox?

Actually, now that I’ve thought about it a little more, the bar only ever gets to about 45% of the screen width but the example for the theme component goes all the way across.

The bar never goes any further than 45% no matter how long I wait. Does that mean the page isn’t fully loading in Edge?


I see the slider if I refresh the page. It’s thinner than the blue bar I see and the blue bar appears after the slider gets to 100%.

1 Like

Hello :wave:

That line is the Skip to main content link bottom. I can repro this if I change the Edge font size.

On 100% default font size it seems good.

However if I set this a bigger font size like 110% or more the Skip to main content button which is hidden above header will show up because it seems the browser font size changer isn’t respect things…

Seems after reload the page, things back to normal

Before reload 200%

After reload

But there is a font size changer in Discourse what you can use instead of browser’s one and you can use the device native accessibility features too. These will respects the elements.

Change text size in Discourse:

Go to the interface page where you can change the text size.


Increasing the font size does make the button visible but on my phone the blue line is visible at 100%. I need to drop the size to 90% to make it disappear, or set the font size in Discourse to Smaller. I’m of an age where I need to start increasing font size though so going smaller isn’t really an option.

I’m puzzled what the purpose of a hidden button is though. If most people (non-mobile Edge or with the ‘right’ font size) can’t see it then it doesn’t seem like a very useful UX item?

That’s for accessibility reason. Screen readers can see that button.


Ahh, OK.

Any idea what’s changed? The blue line wasn’t there a couple of days ago and I’ve not changed the font size in Edge or in Discourse, or on my phone, to cause it to appear. It seemed to appear after I applied the latest set of Discourse commits but I can’t be 100% sure of that.