FIXED: Annoying cosmetic bug on mobile view

[phenomlab]

I’ve just fixed a REALLY annoying cosmetic bug when the site is viewed on mobile. The steps to replicate were very easy, and a common action. In short

1. Load the site
2. Scroll down the page
3. Scroll up again

See how the elements are all sitting over the top of each other !! I couldn’t reproduce this at all using any mobile emulator on a PC, but no matter which phone I tried, the bug appeared no matter what browser I used, so I knew it wasn’t related to any particular browser, but aligned to the viewport on the device.

Fixing this wasn’t a simple affair and involved multiple CSS changes depending on the viewport - plus, the header bar is now fixed instead of sticky (the header bar in fact was the overall culprit). Because of this change, I had to amend various other classes to fit in with the new mobile view.

The upshot ? It’s resolved

[DownPW]

@phenomlab

Hello dude

I don’t know if it’s due to that, but you have this bug that we didn’t have before when we selects the notifications or the MPs on the navbar.

The topic header appears in front.

Good night !

[phenomlab]

@downpw thanks. Nothing that can’t be fixed with z-index

[DownPW]

@phenomlab

I see that too for your to do list :

[phenomlab]

@downpw thanks. This fix has caused some other bugs too, so need to fix those also

[phenomlab]

@DownPW those bugs should all be fixed now hopefully

[phenomlab]

As an interesting side note, I’ve noticed that exactly the same bug exists in the NodeBB community forums. Essentially, it’s caused by the sticky header which doesn’t seem to play very well when you are using custom html to render additional content as I do here.

The fix essentially is to make the header (bar) fixed rather than sticky but this does mean you need compensating CSS to resolve the mobile layout issues that this unfortunately creates.

[phenomlab]

Thanks to @crazycells for spotting another bug - this has also been fixed.

[phenomlab]

@downpw Seems like this has been broken for a while ! Not sure why this is, as I never really use it - I type the emojis directly

[DownPW]

@phenomlab said in FIXED: Annoying cosmetic bug on mobile view:

Seems like this has been broken for a while ! Not sure why this is, as I never really use it - I type the emojis directly

No problem.
Maybe that ?

[phenomlab]

@downpw I tried that earlier and rebuilt the assets. Didn’t make any difference.

[phenomlab]

@downpw fixed

Landed up being caused by some rogue CSS from this block

.tab-content {
    max-height: 0;
    padding: 0 2em;
    color: #898989;
    background: #eeeeee;
    transition: all 0.35s;
    margin-top: -5px;
}

Not sure why I’m using that, but clearly it needs to be more specific

[phenomlab]

And now, after all this time I finally discovered that the CSS I previously referenced was for something else - and used the same CSS name, so I’ve had to reinstate this block

.tab-content {
    max-height: 0;
    padding: 0 2em;
    color: #898989;
    background: #eeeeee;
    transition: all 0.35s;
    margin-top: -5px;
}

And, add this below to make it more specific.

.emoji-tabs .tab-content {
    height: 100%;
    max-height: 100%;
    padding: 0;
    margin: 0;
}