jQuery accordion issue on Safari

Question

I have a very simply built an accordion using jQuery slideUp/slideDown. It works great in Chrome/Firefox, but there is a weird flash issue I get in Safari. It mainly occurs when you start at the bottom of the accordion and click on the items going up.

Specifically, if you open and close each tab there seems to be no issue, but when "Licensing" is open, and you click them going up you will see the flash.

I have tried many different solutions by cannot seem to fix the Safari only issue. How can I resolve it?

// accordian functionality
$('.contact-item').on('click', function() {

  // Check if this is already active
  if ($(this).hasClass('active')) {
    // Slide up panel, remove class
    $(this).find('.contact-info').slideUp(250);
    $(this).removeClass('active');

  } else {
    // Slide up any open panel
    // Remove active class from any open service panel
    $('.contact-info').slideUp(250);
    $('.contact-item').removeClass('active');

    // Open accordian panel
    // Add class to active item
    $(this).find('.contact-info').slideDown(250);
    $(this).addClass('active');
  }

});

.contact-content {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: grey;
}

.contact-list {
  position: absolute;
  top: 50%;
  right: 12%;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 310px;
  color: white;
}

.contact-list .contact-item {
  border-bottom: 1px solid black;
  cursor: pointer;
}

.contact-list h2 {
  color: black;
  letter-spacing: 4px;
  text-transform: uppercase;
  width: 100%;
  text-align: left;
  font-family: arial;
  letter-spacing: 4px;
  font-weight: lighter;
  font-size: 13px;
  padding: 16px 0;
  background: transparent;
  font-weight: 200;
  border: none;
  display: block;
  position: relative;
  margin: 0;
}

.contact-list .contact-info {
  display: none;
  color: black;
  font-size: 12px;
  text-transform: uppercase;
  font-family: arial;
  letter-spacing: 1px;
  font-weight: 200;
  padding: 0 10px 10px;
}

.contact-list .contact-info p {
  margin: 0;
  line-height: 1.3;
  font-weight: 300;
}

.contact-list .contact-info a {
  display: block;
  text-decoration: none;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contact-content">

  <div class="contact-list">

    <div class="contact-item">
      <h2 class="contact-title">Management</h2>
      <div class="contact-info">
        <p>Management Contact: Lorem Watson</p>
        <p>Lorem Entertainment Group</p>
        <a href="mailto:email@test.com" class="contact-link">email@test.com</a>
      </div>
    </div>

    <div class="contact-item">
      <h2 class="contact-title">Publicity</h2>
      <div class="contact-info">
        <p>Management Contact: Lorem Watson</p>
        <p>Lorem Entertainment Group</p>
        <a href="mailto:email@test.com" class="contact-link">email@test.com</a>
      </div>
    </div>

    <div class="contact-item">
      <h2 class="contact-title">Booking</h2>
      <div class="contact-info">
        <p>Management Contact: Lorem Watson</p>
        <p>Lorem Entertainment Group</p>
        <a href="mailto:email@test.com" class="contact-link">email@test.com</a>
      </div>
    </div>

    <div class="contact-item">
      <h2 class="contact-title">Licensing</h2>
      <div class="contact-info">
        <p>Management Contact: Lorem Watson</p>
        <p>Lorem Entertainment Group</p>
        <a href="mailto:email@test.com" class="contact-link">email@test.com</a>
      </div>
    </div>

  </div>
</div>

View on Codepen