title: Can't click the h1 on mobile devices
body: <p>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.</p>
  
  <p>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!</p>
  
  <pre><code>&lt;div class="wrapper clearfix"&gt;
      &lt;img class="bg" src="images/bg.svg"&gt;
      &lt;img class="wheel" src="images/wheel.svg"&gt;
      &lt;div class="right"&gt;
      &lt;div class="g-recaptcha" data-sitekey="6LfhLTUUAAAAAMCrfKgrtViK22w1H98Uisw4dvlj"&gt;&lt;/div&gt;
          &lt;h1 class="spin" data-spin="clicked"&gt;Roztočit&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(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);
              }
          })
      });
  </code></pre>
  
  <p>Note: There is no problem in jQuery/Javascript if you type:</p>
  
  <pre><code>$(".spin").click()
  </code></pre>
  
  <p>To you console, it works just fine, it spins on mobile.</p>
  
  <p>The website to test your ideas:</p>
  
  <p><a href="http://uidave.com/wheel/" rel="nofollow noreferrer">http://uidave.com/wheel/</a></p>
  
  <p>Good luck! Please help me!</p>