Safari“背景附件：本地”滚动错误

如何解决Safari“背景附件：本地”滚动错误

我正在创建一个带有剔除文本链接的菜单。问题是在 Safari（14.0.2 和可能之前的版本）上我无法滚动此菜单。如果您查看 DevTools 链接的矩形，它们实际上是在移动，但文本仍保留在同一位置。

在 Chrome 中一切正常。

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>