Webkit border-radius clipping issue with overflow and transform

HTML

Webkit border-radius clipping issue with overflow and videos

<div class=outer>
  <video controls="" width="250">
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
  </video>
</div>

Fixed with stacking context
<div class="outer stack">
  <video controls="" width="250">
      <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
  </video>
</div>

CSS

.outer {
    overflow: hidden;
    width: 100px;
    height: 100px;
    background-color: rgb(0,238,228);
    border: 3px solid #000;
    border-radius: 50%;
}

.stack {
  isolation: isolate;
}