JSFiddle - React, Tailwind, and code Playground

by Alex Baumgertner

HTML

<div class="wrapper">
  <div class="content">
     <p>
     > Bug in Safari: -webkit-animation dropdown list doesn't work as it should with -webkit-backface-visibility blocks
     </p>
    <div class="dropdown dropdown_hidden">
      click here
      <div class="dropdown__list">
        <div class="dropdown__item">dropdown__item 1</div>
        <div class="dropdown__item">dropdown__item 2</div>
        <div class="dropdown__item">dropdown__item 3</div>
        <div class="dropdown__item">dropdown__item 4</div>
        <div class="dropdown__item">dropdown__item 5</div>
      </div>
    </div>
    <br>
  </div>
  <div class="buttons">
    <div class="button">this block overflows dropdown items</div>
  </div>
</div>

CSS

.wrapper {
  border: 1px solid gray;
  padding: 20px;
}

.dropdown {
  border: 1px solid green;
  padding: 20px;
  width: 200px;
  cursor: pointer;
}

.dropdown__list {
  -webkit-animation: animationForwards 0.2s forwards;
  position: absolute;
  background: rgba(130, 30, 30, 1);
  z-index: 100; /* Safari BUG */
}

.dropdown_hidden .dropdown__list {
  display: none;
}

.dropdown_visible .dropdown__list {
  display: block;
}


.buttons {
  border: 1px solid green;
  padding: 20px;
  background: rgba(30, 130, 30, 1);
  display: flex;
}

.button {
  -webkit-backface-visibility: hidden; /* Safari BUG */
  padding: 10px;
  background: white;
}

@keyframes animationForwards {
  to {
    margin-top: 10px;
  }
}

JavaScript

document.querySelector('.dropdown').addEventListener('click', (e) => {
 const dropdown = document.querySelector('.dropdown')
 
  if (dropdown.classList.contains('dropdown_hidden')) {
    dropdown.classList.remove('dropdown_hidden')
    dropdown.classList.add('dropdown_visible');
  } else {
    dropdown.classList.remove('dropdown_visible')
    dropdown.classList.add('dropdown_hidden');
  }
})