堆叠元素混合混合模式[Safari]

Question

我正在开发一个带有自定义滚动条的网站，该滚动条会根据其背景来更改其颜色：https://nimb.ws/v58Bum

以下是演示：https://why404.lt/en/our-company

此效果是通过将4个元素彼此堆叠在一起而实现的，它们具有不同的z索引，混合混合模式和背景颜色属性。它可以在Chrome，Firefox中运行，但不能在Safari中运行。

现在，我确实知道这是一种非常规的方法，但是也许有人知道如何在Safari中实现此功能？

感谢任何帮助！

这是CSS：

.scrollbar-thumb-y.clone
  left: unset
  right: 7.5%
  width: 4px
  background-color: unset
  top: 83px
  &.clone--1
    backdrop-filter: blur(10px)
    z-index: 4
  &.clone--2
    z-index: 5
    mix-blend-mode: overlay
    background-color: #2f2f2f
  &.clone--3
    z-index: 6
    mix-blend-mode: difference
    background-color: #fff
  &.clone--4
    z-index: 7
    mix-blend-mode: color
    background-color: #0681DA
```