'Skip to main content : post x' has weird spacing and characters

Contribute UX

AI-generated summary

The discussion revolves around a UI issue with the ‘Skip to main content’ button on mobile, where it displays with inconsistent spacing and a strange colon. NateDhaliwal reports the issue occurs after reopening a tab after inactivity, with the header appearing incorrectly in the middle of the screen. awesomerobot questions the visibility of the button, noting it should only appear during keyboard navigation, and suspects a layout problem. NateDhaliwal clarifies that the issue seems to be related to Chrome’s behavior of showing the last loaded page before a refresh, causing the header to move oddly during scrolling until the page reloads.

1

The ‘Skip to main content’ button that appears when in a topic [1] has inconsistent spacing, and the colon (‘:’) also looks weird.

Screenshot_20251216_175755_Chrome
Screenshot_20251216_175755_Chrome1080×2035 271 KB

Screenshot_20251216_175802_Chrome
Screenshot_20251216_175802_Chrome1080×2040 116 KB

The text supposedly comes from here, but I don’t see any of the strings matching this? Or am I understanding this wrongly?

Thanks.

  1. It shows up if you haven’t visited the browser in a while, if you need to repro ↩︎

1 Like
2

these are typically not visible without using keyboard nav… the issue appears to be that you’re seeing them all stacked on top of each other when they shouldn’t be appearing at all…

I think the bigger question I have about the screenshot is why the header is in the middle of the screen? something’s going wrong with the layout entirely.

It shows up if you haven’t visited the browser in a while, if you need to repro

So this is an old tab you’re opening after some time, and it also appears there’s no internet connection? does this remedy itself on refresh? this happens to you regularly?

3

I’m not sure how to explain it, I think it’s a Chrome thing, that it shows thr last loaded page before the new one loads/before the page is refreshed. So I can scroll around the page and the elements on it (e.g. the header) also moves as I scroll (of course, it goes back to normal once I refresh).