Не работает меню в Safari

let signBtn = $('.sign-in-button'),
        signInBlock = $('.sign-in');


    signBtn.click(function() {
        signInBlock.toggleClass('sign-in-active');

      
    });

.sign-in {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  align-items: center;
  position: absolute;
  top: 38px;
  left: 55px;
  width: 300px;
  /*height: 290px;*/
  border: 3px solid #c14c41;
  background: #131313;
  -webkit-transition: .5s ease-in;
  transition: .5s ease-in;
  -webkit-transform: translateY(-200%);
  transform: translateY(-200%);
  opacity: 0;
  z-index: 1001;
}

.sign-in input {
  width: 250px;
  height: 45px;
  margin-top: 20px;
  padding: 5px;
  color: #fff;
  background: #252525;
  border: none;
  outline: 0;
  font-size: 1.2em
}

.sign-in input:focus {
  color: #fff;
  outline: 0;
  border: none
}

.sign-in-button {
  margin-top: 35px;
  margin-bottom: 25px;
}

.sign-in-button button:first-child {
  background: #0250e0;
  color: #fff;
  padding: 8px 22px 8px 22px;
  margin: 0;
  font-size: 1.5em;
  border-radius: 5px
}

.sign-in-button button:last-child {
  color: #626262
}

.sign-in-active {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: .5s ease-out;
  transition: .5s ease-out
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="sign-in-button">Вход</button>
<div class="sign-in">
  <input type="text" placeholder="Логин" id="loginInp">
  <input type="password" placeholder="Пароль" id="passInp">
  <br /><label id="errorLogin"></label>
  <div class="sign-in-button">
    <button id="loginBtn">Вход</button>
    <button id="forgotBtn">Забыли пароль?</button>
  </div>
</div>