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?