图片比重叠元素大1px

Question

我正在尝试使用与父元素底部对齐的伪元素覆盖图像。然后，parent使用overflow：hidden隐藏图像和伪元素的一部分。这应使父对象在同一位置剪切图像和伪元素。但是，图像超出伪元素1px。 Chrome和IE都在特定的断点处发生这种情况。

我将代码插入了stackoverflow，但是无法使用其代码查看器进行复制。但是我可以使用800px的屏幕宽度在Codepen上进行复制： https://codepen.io/dwigt/pen/PXyrXq

.wrapper {
  margin: auto;
}

.item {
  background: lightgrey;
  max-height: 500px;
  min-height: 500px;
  height: 100%;
  max-width: 800px;
}

.image {
  overflow: hidden;
  max-height: 250px;
  position: relative;
}

.image img {
    max-height: 100%;
    width: 100%;
    position: relative;
}

.image::after {
    z-index: 10;
    content: "";
    position: absolute;
    left: -50%;
    top: calc(80%);
    width: 200%;
    height: 200%;
    display: block;
    background: lightgrey;
    border-radius: 100%;
}

<div class="wrapper">
  <div class="item">
    <div class="image">
      <img src="https://images.unsplash.com/photo-1547039963-8bebea5ff026?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1933&q=80"/>
    </div>
    <div class="text">
      Lorem Ipsum
    </div>
  </div>
</div>