Can't click the h1 on mobile devices

Question

I found a weird glitch/bug or something. My website has a simple code of two buttons and two images. If you click the button (simple h1 with event-listener), one of the images spins around. Simple. It works on my MacBook, even on "Inspect Element" and works great there if I try to simulate iPhone etc.

BUT! On my iPhone, if I click the h1, nothing happens. I tried everything, I got rid of all elements, tried z-index, nothing helped!

<div class="wrapper clearfix">
    <img class="bg" src="images/bg.svg">
    <img class="wheel" src="images/wheel.svg">
    <div class="right">
    <div class="g-recaptcha" data-sitekey="6LfhLTUUAAAAAMCrfKgrtViK22w1H98Uisw4dvlj"></div>
        <h1 class="spin" data-spin="clicked">Roztočit</h1>
    </div>
</div>

Css:

.wrapper{
  width: 80vw;
  position: relative;
  height: 100vh;
}

.bg{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events:none;
}

.wheel{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: all 2s;
  z-index: 10;
  pointer-events:none;
}

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

.right{
  width: 20vw;
  min-width: 340px;
  right: -20vw;
  position: absolute;
  padding-top: 20%;
  top: 0;
  z-index: 100;
}

.spin{
    width: 304px;
    background-color: #78da92;
    line-height: 78px;
    font-size: 25px;
    color: #fff;
    border-radius: 4px;
    margin-top: 25px;
    z-index: 100;
}

jQuery:

$(document).ready(function(){
        document.addEventListener('click', function (e) {
          var t = e.target;
          if (!t.dataset.hasOwnProperty('spin')) return;

          var fD = new FormData();
            fD.append('boom', t.dataset.spin);


          XXHR().request('get.php', function(response) {
              var obj = JSON.parse(response);
              console.log(obj);
              $(".wheel").css("-ms-transform", "rotate("+obj.type1+"deg)");
              $(".wheel").css("-webkit-transform", "rotate("+obj.type1+"deg)");
              $(".wheel").css("transform", "rotate("+obj.type1+"deg)");
          }, function(err, status) {

          }, true, fD);
        }, false);

        document.addEventListener("keypress", function(event) {
            if (event.keyCode == 32) {
              var fD = new FormData();
                fD.append('boom', 'clicked');


              XXHR().request('get.php', function(response) {
                  var obj = JSON.parse(response);
                  console.log(obj);
                  $(".wheel").css("-ms-transform", "rotate("+obj.type1+"deg)");
                  $(".wheel").css("-webkit-transform", "rotate("+obj.type1+"deg)");
                  $(".wheel").css("transform", "rotate("+obj.type1+"deg)");
              }, function(err, status) {

              }, true, fD);
            }
        })
    });

Note: There is no problem in jQuery/Javascript if you type:

$(".spin").click()

To you console, it works just fine, it spins on mobile.

The website to test your ideas:

http://uidave.com/wheel/

Good luck! Please help me!

Answer 1

iPhone's not recognising click events is a very old and reproducible behaviour. You can get around it by setting the cursor: pointer CSS property on the element you want clicked.