max-height not working properly in Safari

Question

I'm trying to create responsive accordion using the below code:

    <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>

While the accordion is working on Safari (both mobile and desktop) there was an error where the content was revealed even before I clicked on the tab itself.

I have tried to use max-height: auto but it didn't work. Could someone let me know what I was doing wrong?

https://stackoverflow.com/questions/19119910/safari-height-100-element-inside-a-max-height-element have you tried any of these solutions? — Sigurd Mazanti, Apr 20 '21 at 12:21
@SigurdMazanti Yes I did, none of them are working for me. With the position:absolute it evens make the text overlapping each other — ixsl, Apr 20 '21 at 12:36
Why did you try `max-height: auto`? That doesn't [seem to be a valid value](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height#formal_syntax). You should make a runnable example, it's hard to tell what your problem is — Ruan Mendes, Apr 27 '21 at 17:21

score 2 · Accepted Answer · answered Apr 27 '21 at 13:59

Instead of max-height you can use height and opacity to animate the accordion. This also works in Safari on MacOS and iOS. To make the "jump" disappear after collapsing, I've also removed the margin of the paragraph. I've adjusted:

.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; */
  
  /* ... */ 
}

Here is a fiddle with the complete code.

max-height not working properly in Safari

1 Answers1