Закрытие div при нажатии вне div не работает на iPhone. Прекрасно работает на Mac / ПК и Android

var box;
var value;
var wrapper = $('.wrapper');

$('body').on('click', '#login, #register', function() {
  if ($(this).attr('class')) {
    value = $(this).attr('class')
  } else {
    value = $(this).attr('id')
  }
  switch (value) {
    case 'login':
      box = $('.loginBox');
      break;
    case 'register':
      box = $('.registerBox');
      break;
  }

  box.closest(wrapper).toggleClass('open');
  $('input:text', box).first().focus();
});

// this successfully closes the div when I click outside of it (on Mac/PC & Android, however it does not close the div on iOS)
$('body').on('click', '.wrapper', function() {
  box.closest(wrapper).toggleClass('open');
});
$('body').on('click', '.wrapper div', function(e) {
  e.stopPropagation();
});

.wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.1);
  display: none;
  z-index: 300;
}

.open {
  display: block;
}

.blackBox {
  position: absolute;
  left: 50%;
  top: 41%;
  height: 340px;
  width: 500px;
  z-index: 997;
  margin: 0 auto;
  transform: translate(-50%, -50%);
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "wrapper">
  <div class = "blackBox">
    <div class = "loginBox">
      ...
    </div>
  </div>
</div>

<div class = "wrapper">
  <div class = "blackBox">
    <div class = "registerBox">
      ...
    </div>
  </div>
</div>