14

When a site has a "system message" shown (such as the message shown on recently launched beta sites, like Vi/Vim), the mobile layout suffers:

message

Compare the above with how the mobile navigation bar normally looks:

normal

Worse yet, a selected tab on the navigation bar is shown in white on white:

selected

Observed in mobile Opera 27 on Android, and also in desktop Chrome 41 on Chrome OS, from where the screenshots are taken.

The problem is that <div class="system-message-container"> is positioned where the navigation bar is supposed to be; if it is deleted, the normality is restored.

  • Yes, reproduced. – nicael Mar 1 '15 at 7:09
  • 1
    +1 for this as I posted the same (dupe accepted min ago) today. It's been over 5 months... – HackerKarma Aug 2 '15 at 1:37
  • The. Bug. Is. Finally. Fixed. (because of the 10M banner on SO) – user259867 Sep 13 '15 at 0:32
3

Here's a simple CSS fix:

.nav { clear: both }

P.S. You can currently reproduce this bug on Stack Overflow by switching to the mobile view, thanks to the "ten million questions" announcement. Here's a pair of screenshots showing the SO front page with and without this fix (taken using the Firefox dev tools, in responsive design mode):

Screenshot of Stack Overflow mobile view with CSS bug     Screenshot of fixed Stack Overflow mobile view

You must log in to answer this question.