How can you apply transform and clip-path properties to an element in Safari?

CSS transformations used in combination with SVG clipping renders blank elements in Safari (both macOS and iOS) and Chrome/Chromium-based browsers (macOS). Whereas, on Windows, no broswer shows this problem.

I made a pen describing the issue and comparing different instances: https://codepen.io/hyades/pen/dyNeQae

<!-- HTML -->
<img src="https://picsum.photos/672/374" class="animated clipped">

// SASS
.clipped
  clip-path: url(#site-clip)
.animated
  animation: shake 1s
  animation-iteration-count: infinite
@keyframes shake
  0%
      transform: translate(1px, 1px) rotate(0deg)
  10%
      transform: translate(-1px, -2px) rotate(-1deg)
  20%
      transform: translate(-3px, 0px) rotate(1deg)
  30%
      transform: translate(3px, 2px) rotate(0deg)
  40%
      transform: translate(1px, -1px) rotate(1deg)
  50%
      transform: translate(-1px, 2px) rotate(-1deg)
  60%
      transform: translate(-3px, 1px) rotate(0deg)
  70%
      transform: translate(3px, 1px) rotate(-1deg)
  80%
      transform: translate(-1px, -1px) rotate(1deg)
  90%
      transform: translate(1px, 2px) rotate(0deg)
  100%
      transform: translate(1px, -2px) rotate(-1deg)