Animation breaks in Safari when zooming. How to fix it?

Consider the following animation:

<html>
<head>
  <title></title>
  <style>
    .container {
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }
    @keyframes frames {
      to { transform: translateY(90px); }
    }
    .element {
      width: 8px;
      height: 8px;
      border: 1px solid blue;
      animation: frames 0.8s linear infinite;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="element"></div>
  </div>
</body>
</html>

When I zoom in or out in Safari (⌘+ and ⌘-) on macOS (not sure about iOS), the translation distance is not scaled properly. The relative distance the element travels is shorter when zooming in and longer when zooming out. It works properly in all other browsers I have tried (Chrome, Firefox).

Is there a way to fix this in Safari? Some kind of workaround?

Safari version is 15.0.

I have tried using vendor prefixes, but that didn't help. I don't think percentage values would help here since they relate to the element's size, not its container, and they also do not seem to get scaled in Safari.