Blue line above banner logo

support
1

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

Screenshot_2023-09-23-17-57-47-83_df198e732186825c8df26e3c5a10d7cd
Screenshot_2023-09-23-17-57-47-83_df198e732186825c8df26e3c5a10d7cd1238×1151 110 KB

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.

3

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?

4

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%.

1 Like
5

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.

Screenshot_20230924_070905_com.microsoft.emmx
Screenshot_20230924_070905_com.microsoft.emmx1080×2240 251 KB

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…

Screenshot_20230924_071226_com.microsoft.emmx_edit_1594546371689499
Screenshot_20230924_071226_com.microsoft.emmx_edit_15945463716894991080×2240 281 KB

Screenshot_20230924_071235_com.microsoft.emmx
Screenshot_20230924_071235_com.microsoft.emmx1080×2240 167 KB

Screenshot_20230924_071411
Screenshot_20230924_0714111080×2240 323 KB

Seems after reload the page, things back to normal

Before reload 200%

Screenshot_20230924_073659_com.microsoft.emmx
Screenshot_20230924_073659_com.microsoft.emmx1080×2240 182 KB

After reload

Screenshot_20230924_073712_com.microsoft.emmx
Screenshot_20230924_073712_com.microsoft.emmx1080×2240 204 KB

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.

3 Likes
6

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?

7

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

2 Likes
8

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.