Codepen：https://codepen.io/sabeser/pen/RwYzJpd

HTML：

<div id='wrapper'>
    <div class='circle'></div>
    <div class='circle'></div>
</div>

css：

:root {
            --scale--ratio: 1;
        }

        #wrapper {
            background-color: yellow;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50vh;
            width: 50vw;
        }

        .circle {
            background-color: red;
            width: 50px;
            height: 50px;
            margin: 1em;
            border-radius: 20em;
            /* set default scale */
            scale: var(--scale--ratio);
            /* enable scale animation */
            transition: scale 1.1s;
            -webkit-animation: floataround 1.1s infinite alternate;
            animation: floataround 1.1s infinite alternate;
        }

        @keyframes floataround {
            0% {
                translate: 0;
            }
            100% {
                translate: 0 -8px;
            }
        }

        .circle:hover {
            /* update scale */
            --scale--ratio: 1.2;
            cursor: pointer;
            background-color: green;
        }

在Firefox中，圆圈上下移动，鼠标悬停时会变大。在Brave中，鼠标悬停时圆圈既不移动也不变大。
有没有办法让这些代码在Brave浏览器中工作？