Safari 调整对象大小的问题-解网

问：

当调整具有适合对象定位的背景图像的图像内部元素的大小时，它会严重故障。这是一个 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，错误，糟糕：

任何其他浏览器在崩溃块后，期望的行为，正确，良好：

HTML Safari（ HTMLcss野生动物

@GeForceRTX4090 您可以包含指向 JSFiddle 或其他站点的链接，只要代码中包含重现您的问题的完整代码即可。链接页面的第一句话就说明了这一点：“在提出调试问题时，如果您在问题中以文本形式提供代码，以便潜在回答者可以轻松理解并用于重现问题，人们将能够更好地提供帮助。

2赞 TylerH 11/18/2023

Смотритетакже：我的网站或项目中的某些内容不起作用。我可以只粘贴一个链接吗？

1赞 Cristik 11/18/2023

看起来像一个Safari错误，我在测试代码时遇到了其他故障，例如图像的顶部被复制到底部而不是图像扩展。您可能需要改变方法。

答：

0赞 GeForce RTX 4090 11/24/2023 #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>

上一个：选择字段不保留该值

下一个：浏览器尝试下载html文件而不是打开

Safari 调整对象大小的问题

Safari resizing issue with object-fit

评论