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

如何解决最大高度在 Safari 中无法正常工作

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

    <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: "\276F";
  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 但它没有用。有人可以让我知道我做错了什么吗？

解决方法

您可以使用 max-height 和 height 代替 opacity 来制作手风琴动画。这也适用于 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。