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

Stan początkowy:

initial state of a button

Stan najechania:

Hover state of the same button

Po najechaniu: Pole po najechaniu myszą

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;
}
0
jaka_music 17 grudzień 2019, 16:38
1
Nie mogę tego odtworzyć podczas odwiedzania Twojej witryny. Jakich przeglądarek i jakich wersji używasz?
 – 
Martin
17 grudzień 2019, 16:41
Hej, testowałem to w Chrome 79 i Safari 13. Niestety nie zawsze tak się dzieje. Widziałem to również w mobilnej przeglądarce Chrome na Androidzie.
 – 
jaka_music
4 styczeń 2020, 19:11

1 odpowiedź

Najlepsza odpowiedź

Miałem ten sam problem. Musisz usunąć przepełnienie: przewijanie lub użyć przepełnienie: ukryte; przepełnienie tekstu: wielokropek; . Jest coś dziwnego w używaniu scrolla.

0
Aylin D. 16 marzec 2020, 22:13