search

the-hideout / tarkov-dev

The official site for tarkov.dev - A web app to track item prices, view trader barters, quests, maps, and much more!
https://tarkov.dev
MIT License
145 stars 52 forks source link

Menu flickers at certain window dimensions #791

Open PC-Principal opened 9 months ago

PC-Principal commented 9 months ago

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 commented 9 months ago

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

Razzmatazzz commented 9 months ago

Nevermind; I've reproduced it.

Razzmatazzz commented 9 months ago

@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 commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

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 commented 8 months ago

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 commented 7 months ago

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 commented 6 months ago

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; */ }