блестящий текст с пользовательской полосой прокрутки

Question

Я пытаюсь создать собственную полосу прокрутки.Свиток должен появиться после наведения элемента.Я подготовил некоторый код, и все работает нормально, но когда я впервые наведу курсор на элемент, у меня есть двойной текст, но в другом цвете.Когда я снова наведите элемент, текст исчез.Я вставляю код и экран, чтобы вы лучше на него указывали.https://imgur.com/a/YIqfwYk

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    -webkit-background-clip: text;
    color: #fff;

    &:hover {
        background-color: rgba(0, 0, 0, 0.2);
    }

    &::-webkit-scrollbar {
        width: .5rem;
    }

    &::-webkit-scrollbar-track {
        display: none;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: .5rem;
        background-color: inherit;
    }
}

Answer 1

Проблема решена. У меня был transition на all и после изменения только на background, он отлично работает