Safari 调整对象大小问题

Question

当调整具有适合对象定位的背景图像的图像内部元素的大小时，它会出现严重故障。这是一个 FIDDLE，它具有适合对象、绝对定位的背景图像，并且内部有一个边框块。折叠有边框的块时，只有位于该块下方和内部的图像部分是正确的。有人经历过这个并知道解决方案吗？

function changeSize() {
  const currentHeight = document.getElementById('stretcherdiv').getAttribute("style");
  if (currentHeight === "height:400px;") {
    document.getElementById('stretcherdiv').setAttribute("style", "height:100px;");
  } else {
    document.getElementById('stretcherdiv').setAttribute("style", "height:400px;");
  }
}

.outer {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
}

.stretcher {
  height: 20px;
  width: 80px;
  background: rgba(0,0,0,0);
  border: 1px solid cyan;
  z-index: 100;
  margin: 120px auto;
}

.image {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  object-position: center center;
}

<button onclick="changeSize()">
  expand/collapse
</button>

<div class="outer">
  <div class="stretcher" id="stretcherdiv" style="height:400px;"></div>
  <img class="image" src="https://www.w3schools.com/html/img_girl.jpg"> </img>
</div>

问题 - Safari 在折叠边框块后，错误，糟糕：

折叠块后的任何其他浏览器，所需的行为，正确，好：

Answer 1

万一将来有人遇到这个问题 - 我设法通过将绝对位置应用于图像包装而不是图像本身来解决这个问题。

似乎是 Safari 的一个故障，可以通过这种方式解决。

function changeSize() {
  const currentHeight = document.getElementById('stretcherdiv').getAttribute("style");
  if (currentHeight === "height:400px;") {
    document.getElementById('stretcherdiv').setAttribute("style", "height:100px;");
  } else {
    document.getElementById('stretcherdiv').setAttribute("style", "height:400px;");
  }
}

.outer {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
}

.stretcher {
  height: 20px;
  width: 80px;
  background: rgba(0,0,0,0);
  border: 1px solid cyan;
  margin: 120px auto;
  z-index:100;
}

.imgwrap {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.image {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center center;
}

<button onclick="changeSize()">
  expand/collapse
</button>

<div class="outer">
  <div class="stretcher" id="stretcherdiv" style="height:400px;"></div>
  <div class="imgwrap">
    <img class="image" src="https://www.w3schools.com/html/img_girl.jpg"> </img>
  </div>

</div>