Text blur after scroll bar hide with webkit

Question

When i hide scroll bar with webkit :

/* Scrollbar*/
::-webkit-scrollbar {width: 0px;height: 0px;}
::-webkit-scrollbar-track {background: #f1f1f1;}
::-webkit-scrollbar-thumb {background: #888;}
::-webkit-scrollbar-thumb:hover {background: #555;}
/* Only Firefox 64 & + */
*{scrollbar-width: none!important;}
::selection { background: transparent; } 
::-moz-selection { background: transparent; }

My text is blury :( And when i canhge scroll bar Width from 0px to X px it's not :(

Do you have a solution ? to fix it or an other way to hide scroll bar and keep scroll function ?

thx

Answer 1

You can hide scroll bar and keep scroll using

\\webkit browsers
div::-webkit-scrollbar {display:none;}

\\Firefox
div{
scrollbar-width: none!important;
}

Answer 2

wrap a container around your scrollable area. container 1 is the outer one

.container1{
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.container2{
    width: 100%;
    height: 99%;
    overflow: auto;
}