CSS：Chrome 检查器使用转换和自定义 css 变量导致动画失败

如何解决CSS：Chrome 检查器使用转换和自定义 css 变量导致动画失败

我正在调试一个带有 CSS 箭头的小下拉菜单。 当我试图在谷歌浏览器（最新版本，在 MacOS 和 Windows 上都复制）上检查它时，我看不到箭头的属性：

在 Safari、Firefox、Edge 上也一样：

我有一个 Codepen，您可以在其中查看问题：

https://codepen.io/foyerassurances/pen/9e6fbe8ce9e3c6e767b3b65fb895da79

这是因为 transform 在 keyframes 中带有自定义变量：

    @keyframes dropdown-slidefade-open-effect {
        0% {
          opacity: 0;
          transform: translateY(
            var(--Dropdown-v-padding)
          ); // Works in chrome inspector if removed or changed to 16px
        }

        1% {
          opacity: 0;
          transform: translateY(
            var(--Dropdown-v-padding)
          ); // Works in chrome inspector if removed or changed to 16px
        }

        100% {
          opacity: 1;
        }
      }

CSS 有问题还是我应该创建 Chrome 错误案例？

更新：

我已经将问题封装在一个更小的 Codepen 中： https://codepen.io/foyerassurances/pen/f5a0e23f5c3bbfe69bf092e1f3150a44

（transform 不是问题）