：active：focus伪元素不会应用于safari上的div

Question

我有3个div元素并排点击它们，我看到蓝色焦点边框可能半秒钟然后它消失了。要解决此问题，我添加了：active：focus状态并设置outline：none。这适用于chrome，firefox，但不适用于safari。关于如何去做的任何指示？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;