Firefox中线性渐变背景的CSS变量过渡失效，Chrome正常的问题求助

我最近在做一个滚动时背景线性渐变平滑过渡的效果，在Chrome里完全正常，但到Firefox里就变成瞬间切换了，完全没有过渡动画，实在搞不懂哪里出问题了😭

我的实现逻辑是：当页面滚动时，给目标div切换类名——从static-item换成sticky-item，通过自定义CSS变量控制渐变的颜色，再给这些变量添加过渡动画。

HTML结构 #

<div class="target static-item"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente alias quod ullam non</div>
<div class="big-box" style="height: 120vh; background: black;"></div>

JavaScript代码 #

// Initial state
const target = document.getElementsByClassName("target");
const w_width = 651;
var scrollPos = 0;

changeTargetClass();
checkWindowSize();

window.addEventListener('resize', checkWindowSize);

function checkWindowSize() {
  if (window.innerWidth > w_width) {
    // adding scroll event
    window.addEventListener('scroll', changeTargetClass);
  } else {
    window.removeEventListener('scroll', changeTargetClass);
    target[0].classList.add('static-item')
  }
}

function changeTargetClass() {
  scrollPos = (document.body.getBoundingClientRect()).top;
  setupTarget()
}

function setupTarget() {
  if (scrollPos >= 0) {
    target[0].classList.add('static-item')
    target[0].classList.remove('sticky-item')
  } else {
    target[0].classList.remove('static-item')
    target[0].classList.add('sticky-item')
  }
}

CSS样式 #

@property --myColor1 {
  syntax: '<color>';
  initial-value: rgba(85, 85, 249, 1);
  inherits: false;
}

@property --myColor2 {
  syntax: '<color>';
  initial-value: rgb(255, 255, 255);
  inherits: false;
}

.target {
  top: 0;
}

.flex-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  top: 0;
  z-index: 3;
  background: white;
}

.sticky-item {
  position: sticky;
  --myColor1: rgb(255, 255, 255);
  --myColor2: rgb(255, 255, 255);
  transition: --myColor1 1s ease-in-out, --myColor2 1s ease-in-out;
  background: linear-gradient(180deg, var(--myColor1) 0%, var(--myColor2) 100%);
}

.static-item {
  position: static;
  --myColor1: rgba(85, 85, 249, 1);
  --myColor2: rgb(255, 255, 255);
  transition: --myColor1 1s ease-in-out, --myColor2 1s ease-in-out;
  background: linear-gradient(180deg, var(--myColor1) 0%, var(--myColor2) 100%);
}

有没有大佬能帮我看看Firefox里为什么过渡不生效呀？

备注：内容来源于stack exchange，提问作者Sergey