CSS scrollbar-gutter: stable; not working on Safari browser, but on other browsers working properly

Question

This code working for all other browsers, but right space is not symmetrical on Safari browsers, but everything ok on other browsers. I know that this property is not supported on Safari and I searching for solution.

.card {
  background: red;
  padding: 24px 12px 24px 24px;
  width: 240px;
  margin: 0 auto;
  height: 160px;
}

.scrollable-content {
  scrollbar-gutter: stable;
  overflow-y: auto;
  scrollbar-width: thin;
}

.scrollable-content::-webkit-scrollbar {
  width: 12px;
  background-color: blue;
}

.scrollable-content::-webkit-scrollbar-track {
  border-radius: 8px;
}

.scrollable-content::-webkit-scrollbar-thumb {
  background-clip: content-box;
  background-color: rgba(136, 136, 136, 0.5);
  border: 4px solid transparent;
  border-radius: 8px;
  height: 56px;
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
  background-color: #888888;
}

.card-body {
  background-color: yellow;
}

<div class="card scrollable-content">
  <div class="card-body">
    test lorem100
  </div>
</div>

How to implement it on Safari

Answer 1

I calculate the browser scrollbar width using Javascript and manually add it as a margin, It's annoying but this is the only way I know how to support Safari users

The Javascript I use

const scrollDiv = document.createElement('div');
scrollDiv.style.cssText = 'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;';
document.body.appendChild(scrollDiv);
const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
document.body.removeChild(scrollDiv);
document.body.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);

The CSS I use

body {
    overflow-y: auto;
    margin: 0;
}

body.bodyLock {
    margin-right: var(--scrollbar-width);
    overflow-y: hidden;
}

How to get the scrollbar width: How can I get the browser's scrollbar sizes?