最大高度在 Safari 中无法正常工作

Question

我正在尝试使用以下代码创建响应式手风琴：

    <div class="tabs specs">
   <div class="tab">
      <input type="checkbox" id="chck1">
      <label class="tab-label" for="chck1">GIFT DETAILS</label>
      <div class="tab-content">
        <p>Simple and Elegant Love Letter/Card Message Included Inside Standard Gift Box.</p>
      </div>
   </div>
   <div class="tab">
      <input type="checkbox" id="chck2">
      <label class="tab-label" for="chck2">SHIPPING TIME</label>
      <div class="tab-content">
        <p>Simple and Elegant Love Letter/Card Message Included Inside Standard Gift Box.</p>
      </div>
   </div>
</div>

<style>
.tabs {
  overflow: hidden;
}
 
.tab {
  width: 100%;
  color: white;
  overflow: hidden;
}
.tab-label {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  background: white;
  font-weight: bold;
  font-size: 15px;
  cursor: pointer;
  color: #333333;
  /* Icon */
}
.tab-label:hover {
  background: white;
}
.tab-label::after {
  content: "6F";
  width: 1em;
  height: 1em;
  text-align: center;
  -webkit-transition: all .35s;
  transition: all .35s;
} 
.tab-content {
  max-height: 0;
  padding: 0 1em;
  color: #333333;
  background: white;
  -webkit-transition: all .35s;
  transition: all .35s;
}
input:checked + .tab-label {
  background: white;
}
input:checked + .tab-label::after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
input:checked ~ .tab-content {
  max-height: 100vh;
  padding: 1em;
}
.specs input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
</style>

当手风琴在 Safari（移动设备和桌面设备）上运行时出现错误，甚至在我单击选项卡本身之前内容就已显示。

我尝试过使用 max-height: auto 但它没有用。有人可以让我知道我做错了什么吗？

Answer 1

您可以使用 height 和 opacity 代替 max-height 来制作手风琴动画。这也适用于 MacOS 和 iOS 上的 Safari。为了使“跳转”在折叠后消失，我还删除了段落的边距。我调整了：

.tab-content {
  /* removed: max-height: 0; */
  /* new */
  height: 0; 
  opacity: 0;

  /* ... */
}

/* new */
.tab-content p {
  margin: 0; 
}

input:checked ~ .tab-content {
  /* new */
  height: auto; 
  opacity: 1;
  /* removed: max-height: 100vh; */
  
  /* ... */ 
}

这里是 fiddle 完整代码。

最大高度在 Safari 中无法正常工作

max-height not working properly in Safari

html

css

accordion