Vue.JS Firefox and Safari don’t hides scrollbar when Chrome and Edge do

Im doing a bit of frontend development via Vue.JS and Vuetify. My goal was it to archive a hidden scrollbar (through i know i cannot delete it ^^) and i know that the code snippet shown below should do the job, they are located in the index.html that is used as a template for vue-cli to build the website:

<style>
    html::-webkit-scrollbar { display: none; }
    html { -ms-overflow-style: none; }
</style>

On Chrome and MS Edge these works flawlessly but on for example Safari and Firefox it doesn’t do a thing – even if its shown in the Developer tools it seems to be just ignored completely. If I put it into each App.vue (I got an Multi Page Project) it seems to work but why? And is there a solution to this Problem?

Greetings