CSS: Chrome inspector failing with animation using transform and custom css variables

I was debugging a small dropdown with a CSS arrow. When I tried to inspect it on Google Chrome (latest version, reproduced both on MacOS and Windows), I couldn't see the properties of the arrow:

the same on Safari, Firefox, Edge works just fine:

I have a Codepen where you can see the issue:

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

It is happening because of the transform with custom variables in the 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;
        }
      }

Is there an issue with the CSS or should I create a Chrome bug case ?

UPDATE:

I have encapsulated the issue in an even smaller Codepen: https://codepen.io/foyerassurances/pen/f5a0e23f5c3bbfe69bf092e1f3150a44

(transform isn't the issue)