Chrome OS doesn't render CSS scrollbar buttons

Question

I was testing making a custom scrollbar in CSS. The test I did worked fine for me on Windows, but on Chrome OS, for some reason, it did not.

Chrome OS displayed everything normally, except the scrollbar buttons, they don't display at all. How would I get them to show?

The code I tested it with is below.

::-webkit-scrollbar-button:single-button:horizontal:decrement {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMy4yMDcxMVY4Ljc5Mjg5QzggOS4yMzgzNSA3LjQ2MTQzIDkuNDYxNDMgNy4xNDY0NSA5LjE0NjQ1TDQuMzUzNTUgNi4zNTM1NUM0LjE1ODI5IDYuMTU4MjkgNC4xNTgyOSA1Ljg0MTcxIDQuMzUzNTUgNS42NDY0NUw3LjE0NjQ1IDIuODUzNTVDNy40NjE0MyAyLjUzODU3IDggMi43NjE2NSA4IDMuMjA3MTFaIiBmaWxsPSIjMjIyMjIyIi8+Cjwvc3ZnPgo=");
}

::-webkit-scrollbar-button:single-button:horizontal:increment {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTQgOC43OTI4OUw0IDMuMjA3MTFDNCAyLjc2MTY1IDQuNTM4NTcgMi41Mzg1NyA0Ljg1MzU1IDIuODUzNTVMNy42NDY0NSA1LjY0NjQ1QzcuODQxNzEgNS44NDE3MSA3Ljg0MTcxIDYuMTU4MjkgNy42NDY0NSA2LjM1MzU1TDQuODUzNTUgOS4xNDY0NUM0LjUzODU3IDkuNDYxNDMgNCA5LjIzODM1IDQgOC43OTI4OVoiIGZpbGw9IiMyMjIyMjIiLz4KPC9zdmc+Cg==");
}

::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuMjA3MTEgNEg4Ljc5Mjg5QzkuMjM4MzUgNCA5LjQ2MTQzIDQuNTM4NTcgOS4xNDY0NSA0Ljg1MzU1TDYuMzUzNTUgNy42NDY0NUM2LjE1ODI5IDcuODQxNzEgNS44NDE3MSA3Ljg0MTcxIDUuNjQ2NDUgNy42NDY0NUwyLjg1MzU1IDQuODUzNTVDMi41Mzg1NyA0LjUzODU3IDIuNzYxNjUgNCAzLjIwNzExIDRaIiBmaWxsPSIjMjIyMjIyIi8+Cjwvc3ZnPgo=")
}

::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTguNzkyODkgOEgzLjIwNzExQzIuNzYxNjUgOCAyLjUzODU3IDcuNDYxNDMgMi44NTM1NSA3LjE0NjQ1TDUuNjQ2NDUgNC4zNTM1NUM1Ljg0MTcxIDQuMTU4MjkgNi4xNTgyOSA0LjE1ODI5IDYuMzUzNTUgNC4zNTM1NUw5LjE0NjQ1IDcuMTQ2NDVDOS40NjE0MyA3LjQ2MTQzIDkuMjM4MzUgOCA4Ljc5Mjg5IDhaIiBmaWxsPSIjMjIyMjIyIi8+Cjwvc3ZnPgo=")
}

::-webkit-scrollbar {
    height: 12px;
    width: 12px
}

::-webkit-scrollbar-track, ::-webkit-scrollbar-button:single-button {
     background-color: #e5e5e5;
}

::-webkit-scrollbar-button:single-button:hover {
    background-color: #eee;
}
::-webkit-scrollbar-thumb {
    background-color: #c5c5c5;
}

::-webkit-scrollbar-corner {
    background-color: #ddd;
}

::-webkit-scrollbar-button:single-button:horizontal:decrement, ::-webkit-scrollbar-button:single-button:horizontal:increment, ::-webkit-scrollbar-button:single-button:vertical:decrement, ::-webkit-scrollbar-button:single-button:vertical:increment {
    height: 12px;
    width: 12px;
    background-position: 50%;
}

Any ideas?

Chrome OS doesn't render CSS scrollbar buttons

0 Answers0