带有模糊滤镜的元素仅在某些角度被切断

Question

我正在使用::after伪元素将其渲染为另一个的模糊阴影以伪造3D场景。但是，仅当不旋转框及其阴影（旋转角度为0度）时，此元素才会被切断-向左或向右旋转后，阴影就会完全显示出来。我了解到滤镜和3d旋转元素在某些情况下不能很好地配合使用，但是我还不了解这一点。

我正在使用最新的Chrome（v75）-在Firefox（v67）中似乎可以正常工作

要查看更改悬停在视图的左侧/右侧并与默认位置进行比较：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  height: 100vh;
  width: 100vw;
}

.triggers {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.triggers:focus .container .box {
  border-radius: 100px;
}
.triggers .left {
  position: absolute;
  z-index: 1;
  top: 0;
  right: calc(50% + 50px);
  bottom: 0;
  left: 0;
}
.triggers .left:hover ~ .container .box {
  transform: rotateY(-15deg);
}
.triggers .right {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(50% + 50px);
}
.triggers .right:hover ~ .container .box {
  transform: rotateY(15deg);
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  transform-style: preserve-3d;
  perspective: 200px;
}

.box {
  height: 100px;
  width: 100px;
  border-radius: 0;
  background-image: radial-gradient(farthest-corner at 50% 0, red, transparent);
  background-color: darkred;
  transform: rotateY(0);
  transition: all 300ms ease 0s;
  transform-style: preserve-3d;
}
.box::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 0;
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.03));
  filter: blur(10px);
  transform-origin: center bottom;
  transform: translate3d(0, 50px, -100px) rotateX(-80deg);
  transition: all 300ms ease 0s;
}

<div class="triggers">
  <div class="left"></div>
  <div class="right"></div>
  
  <div class="container">
    <div class="box"></div>
  </div>
</div>