Background-clip: padding-box doesn't work for a thick transparent border

Question

I'm trying to customize scrollbar appearance using the invisible borders solution.
It works well, except for some edge cases, probably when the border width is too sick.
Here's an example:

.box,
.content {
  box-sizing: border-box;
}

.box {
  width: 500px;  
  overflow-x: auto;
}

.box::-webkit-scrollbar-track, 
.box::-webkit-scrollbar-thumb {
    border-radius: 3px;
    border-width: 20px 15px 0px;
    border-color: rgba(0, 0, 0, 0);
    border-style: solid;
    background-clip: padding-box;
}

.box::-webkit-scrollbar-thumb {
    background-color: #000;
}

.box::-webkit-scrollbar-track {
    background-color: #D2D2D2;
}

.box::-webkit-scrollbar {
    height: 22px;
    width: 0;
}

.content {
  width: 800px;
  height: 10px;
  background: linear-gradient(45deg, red, blue);
}

.box.is-fixed::-webkit-scrollbar-track, 
.box.is-fixed::-webkit-scrollbar-thumb {
  border-radius: 0px;
}

<p>Scrollbar styled incorrectly:</p>

<div class='box'>
  <div class='content'>
  
  </div>
</div>

<p>Desired style:</p>

<div class='box is-fixed'>
  <div class='content'>
  
  </div>
</div>

Some ways to fix that (don't know why they work):

• set border-radius from 3px to 0 or 1px
• set top border width to 19px instead of 20px

Why the original solution doesn't work and why fixes above help?