css - Safari "background-attachment: local" scroll bug

Question

I'm creating a menu with knockout text links. The issue is that on Safari (14.0.2 and possibly prior versions) I can't scroll this menu. If you take a look at DevTools links' rectangles, they are actually moving, but text remains on the same place.

In Chrome everything works just fine.

html {
  overflow: hidden
}

.scrollable {
  height: 300px;
  overflow: auto;
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-attachment: local;
}

.link {
  display: block;
  color: transparent;
}

/* design purposes */

.link {
  font-size: 40px;
}

<div class="scrollable">
  <a href="#" class="link">Link 1</a>
  <a href="#" class="link">Link 2</a>
  <a href="#" class="link">Link 3</a>
  <a href="#" class="link">Link 4</a>
  <a href="#" class="link">Link 5</a>
  <a href="#" class="link">Link 6</a>
  <a href="#" class="link">Link 7</a>
  <a href="#" class="link">Link 8</a>
  <a href="#" class="link">Link 9</a>
</div>

Answer 1

等待大神答复