Dziwne półprzezroczyste pudełko pojawia się po Hover

Zauważyłem ten dziwny błąd w CSS i nie mam pojęcia, dlaczego tak się dzieje.

Stan początkowy:

Stan najechania:

Po najechaniu:

Próbowałem debugować, ale nigdzie nie ma tego pudełka. Jakieś pomysły?

Możesz to zaobserwować na tej stronie https://busko.si/settings.html (zdarza się to wszystkie podobne przyciski i przełączniki, czasami po najechaniu kursorem, czasami po kliknięciu w Chrome i Safari).

A jeśli to jakakolwiek pomoc, oto CSS dla przycisku:

.button-wrapper {
    background: var(--text-color);
    border-radius: 25px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    margin: 10px 0;
    max-width: 100%;
    overflow: scroll;
    padding: 5px 10px;
    transition: background 200ms;
    vertical-align: middle;
    white-space: nowrap;
}

.button-inner {
    border-radius: 25px;
    color: var(--text-color-alt);
    cursor: pointer;
    display: inline-block;
    font-size: 11px;
    padding: 5px 10px;
    font-weight: 500;
    text-transform: uppercase;
}