Docs site - sidebar content not shown and topbar runs away (iPhone X)

[tstapleton]

Bug report

Tradeshift UI version affected

v9.2.0 (whatever is in the docs site)

Expected Behavior

Clicking on the sidebar shows menu items. And topbar doesn’t go away.

Actual Behavior

See video. I clicked on the hamburger icon in the topbar at the beginning, which made the screen go blank.

Steps to reproduce

IPhone X and Safari. Load docs site.

Video

https://www.dropbox.com/s/bvui4tx7dnpmbco/File%20Nov%2013%2C%2010%2058%2026%20AM.mp4?dl=0

[wiredearp]

The menu should be fixed already on the 10.x branch, by the way, but that of course doesn't help anyone browsing the website on mobile Safari just yet. I'll milestone it there for now.

The TopBar is not supposed to go away. It is supposed to always linger just beyond the top of the screen so that it reappears as soon as you start to scroll back up. It uses some kind of weirdly sticky positioning.

[wiredearp]

@tstapleton I'm still confused about the problem with the TopBar, even after watching the video again. The issue title claims that "TopBar runs away" while the bug description states that "TopBar doesn’t go away", that seems contradictory to mee. In the video, I see a little bit of both behaviors; and the intended behavior is indeed that the TopBar should scroll away as the user scroll down, but that it should snap back into place as soon as he begins to scroll up. This does sort of seem to work on the video, except there is a problem with clipping of the TopBar, which sometimes get so bad that you cannot see the TopBar at all, but this bug is (to my knowledge) unfixable.

Note that the TopBar is the purple thing on the top. Below this there is a TabBar, the light gray bar, except is has no tabs in the screenshot 😞 Unlike the TopBar, the TabBar is never supposed to exit the screen and become completely hidden, it is only supposed to scroll to the top of the viewport and then stay fixed here (so that the user can always see the tabs).

The question is then, why is the TabBar visible when there are no tabs ❓ but I'm still not clear on this whole problem with the TopBars observed versus expected (versus intended) behavior.

[tstapleton]

The issue title claims that "TopBar runs away" while the bug description states that "TopBar doesn’t go away", that seems contradictory to me

the latter part was under expected behavior, the former was about what i saw.

The question is then, why is the TabBar visible when there are no tabs

i caused that. don't need to worry about it.

which sometimes get so bad that you cannot see the TopBar at all, but this bug is (to my knowledge) unfixable

unfixable? i'm able to trigger it rather easily on my phone.

[wiredearp]

Yes, it is easily reproducible but unfortunately not (to my knowledge) fixable. What you see is the nothingness that exist beyond the viewport and we would probably need to abandon the whole iframe setup to get rid of this effect (of the Apple patented "bouncy drag"), ot at least that is what I concluded some many many years ago when I first saw it. We could of course look at it again, specifically on @kaumac's iPhone, but I can't promise that we can fix it. The best I could come up with (back then) was to change the color of the white nothingness using a combination of sketchy hacks 😞

But yes, I have finally managed to read the line that says "expected behavior" and as such, the expectation is wrong. The TopBar is supposed to scroll away 👍

[wiredearp]

Right. So there really is a bug: The iOS bouncy effect can mysteriously "overbounce" the header out of the viewport so that it doesn't correctly track the scrollTop of the Main element 😞

[tynandebold]

I can't reproduce this on an iPhone X when looking at the docs site for v12. It seems to have been fixed in this version. Since this issue is under the umbrella of the tradeshift-ui@12.0.x milestone, we shouldn't worry about it.

I've uncovered another issue though, wherein the toolbar-icon takes the place of the mobile-menu icon. We should address that here.

[tstapleton]

Confirmed, sidebar is shown and topbar looks good on v12.

Did you happen to click on the company card component? It does a little dance 💃🕺

https://www.dropbox.com/s/9lnupszlngz88di/tradeshift-UI-company-card.MP4?dl=0

[tynandebold]

Yes, I saw that. Too funny. That's part of the problem I listed in my previous comment. Aiming to fix today.

[tynandebold]

Fixed with pull #723