Menu flickers at certain window dimensions

[PC-Principal]

Describe the Issue

While the data in the interface is loading on https://tarkov.dev/, the navigation bar on the right side of the screen behaves strangely, you can see an example in the video (Extra Information).

Expected Behavior

When loading page data, the button should not behave as if it does not have enough space on the screen.

To Reproduce

This happens sometimes, you can try reloading the page.

Client

Desktop

Browser

Chrome

Relevant Console Log Output

No response

Extra Information

Link on video with that bug: https://www.youtube.com/watch?v=G1S9IcG5NJU

About soft:
Windows 10
Google Chrome versions: 120.0.6099.110

[Razzmatazzz]

@PC-Principal I'm having trouble reproducing this issue. What screen resolution are you using?

[Razzmatazzz]

Nevermind; I've reproduced it.

[Razzmatazzz]

@the-hideout/reviewers do any of you know why the relevant css selectors wouldn't be working for chromium-based web browsers? It works as it should on Firefox.

[Razzmatazzz]

This bug only seems to appear in chromium browsers when the site is deployed (prod or dev). It does not appear in chromium browsers in local testing. It does not appear in Firefox in local testing or when deployed.

[GrantBirki]

I use a chromium based browser (Brave) and I just confirmed the behavior on my end as well. As to why this is occurring.. I don't really know unfortunately

[GrantBirki]

Here is a guess though if we think its related to CSS and only occurs on certain browsers (I could be completely wrong).

Each browser is shipped with its own built in (or default) CSS "settings". If some CSS settings fail to load or don't have defined values, sometimes these browser defaults can take over. Perhaps the Firefox defaults do not cause issues here but the chromium based defaults are being applied during page load that is causing this visual artifact.

---

This is pretty much just a guess but it was my first initial hunch.

[Razzmatazzz]

For anyone experiencing this bug, it appears only when the width of the browser is set to very specific dimensions. You should be able to make it disappear by resizing the width of the window a bit. That's not a solution, of course, but just a temporary workaround.

[alefranz]

This seems easy to reproduce on a 1440p screen set vertically, as that width trigger the bug (on pages that don't have a scroll bar)

[jklamert]

I had this happen on my first page load. Disabling this stopped the flicker in Brave:
nav.navigation ul.menu li:nth-last-child(1 of li.visible-menu-item):not(:nth-last-child(1 of li.overflow-member)) { /* padding-right: 50px; */ }