:active: фокус псевдоэлемент не применяется к div в safari

Question

У меня есть 3 элемента div рядом и, щелкая их, я вижу синюю рамку фокусировки, возможно, на полсекунды, а затем она исчезает. Чтобы решить эту проблему, я добавил: active: focus и установил контур: нет. Это работает на Chrome, Firefox, то есть, но не на сафари. Любые указатели о том, как это сделать?

$('div').on('click', function() {
  $('div').removeClass('active');
  $(this).addClass('active');
});

.block {
  display: inline-block;
  padding: 15px 85px;
  border: 1px solid #e6e8ea;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
}

.block.active {
  background-color: #bddcfc;
  border-color: #278efc;
  outline: none;
}

.block:hover {
  background-color: $color-lighter;
  border-color: $color-light;
}

.block.active:hover {
  background-color: #bddcfc;
  border-color: #278efc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="block" tabindex="0">1</div>
<div class="block" tabindex="0">2</div>
<div class="block" tabindex="0">3</div>