Empty black box/alert shown

[ShrimpCryptid]

Description:

Players have reported being shown an empty black screen after voting or certain other alert interactions. I've also seen it happen on initial load when the role should be shown. There is no way to close the alert unless players refresh the page.

Reproduction:

None yet, see dev build: https://secret-hitler-online-dev0.web.app/

Notes:

May be caused by conflicting animations attempting to use the same AlertBox component?

[moltasthornblom]

I noticed this issue as well, both when changing icons in lobby and when ingame. The bug could be considered as gamebreaking due to me being unabled to "End Turn" while the box was visible. I'm inclined to think that this is a firefox issue due to only being able to reproduce the bug in firefox.

I did some debugging of the "showChangeIconAlert" function but everything works as expected. However I noticed that the box disappeared when using mozilla dev tools lol.

.appear-custom-alert{
    transition-timing-function: ease-in-out;
    -webkit-animation: appear-custom-alert 0.5s;
    animation: appear-custom-alert 0.5s;
    visibility: visible;
    transition: visibility 0.5s;
    opacity: 1;
}

.disappear-custom-alert {
    transition-timing-function: ease-in-out;
    -webkit-animation: disappear-custom-alert 1s;
    animation: disappear-custom-alert 1s;
    visibility: hidden;
    transition: visibility 0.5s;
}

My theory is that the animation for some reason does not fire in firefox. I was able to solve it by adding a opacity:0; to the disappear-class. I also added some transitioning.

.disappear-custom-alert {
    transition-timing-function: ease-in-out;
    -webkit-animation: disappear-custom-alert 1s;
    animation: disappear-custom-alert 1s;
    visibility: hidden;
    opacity:0;
    transition: visibility 0.5s, opacity 0.5s;
}

I

However there is still some tweaking to be done to get the timing right with the animations so I did not do a PR, instead i simply provide with some context and information.

Cheers!

[ShrimpCryptid]

I noticed this issue as well, both when changing icons in lobby and when ingame. The bug could be considered as gamebreaking due to me being unabled to "End Turn" while the box was visible. I'm inclined to think that this is a firefox issue due to only being able to reproduce the bug in firefox.

I did some debugging of the "showChangeIconAlert" function but everything works as expected. However I noticed that the box disappeared when using mozilla dev tools lol.

...

Thanks for the repro, I'll take a look! I originally opened this issue because it was happening on the development branch after some changes I'd made, so it's interesting that there's a similar issue happening on the main production branch too. Hopefully it'll solve both!