How to make a scroll with a glow effect

I wrote such a scroll, but the box-shadow is drawn with a delay every few seconds, how can I make the glow effect stable

<!DOCTYPE html>

<body>
<div class="main">
    <div class="child">

    </div>
</body>
<style>
    body{
        overflow:hidden;
    }

    .main {
        overflow-x: hidden;
        overflow-y: auto;
        width: 50vmin;
        height: 50vmin;
    }

    .main::-webkit-scrollbar {
        width: 5vmin;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        border-radius: 5vmin;
    }

    .main::-webkit-scrollbar-thumb {
        background: blue;
        box-shadow: 0px 0px 5vmin 5vmin rgb(109, 93, 255);
        border-radius: 5vmin;
    }
    .child{
        height:200%;
        width:10%;
    }



</style>

</html>

Also, draw delays are present on other divs on which the shadow falls.

You can force the browser to redraw by moving focus to and from another application.

How to make a scroll with a glow effect

0 Answers