A blue line has appeared above the banner logo on mobile Edge browsers, as reported by packman. The issue is not present in Firefox or Chrome, and only occurs when the browser is in mobile mode. packman suspects it may be related to a recent Discourse update or Edge browser change.
Don identified the blue line as the “Skip to main content” link, which is normally hidden. The link becomes visible when the font size is increased in Edge. Don suggested using Discourse’s built-in font size changer or device native accessibility features to avoid this issue.
packman found that decreasing the font size to 90% or setting the Discourse font size to “Smaller” resolves the issue. However, packman expressed concern about the usability of a hidden button, which Don explained is for accessibility reasons, allowing screen readers to access the button.
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.
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?
Edit:
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%.
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…
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?
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.
