2017-10-21 106 views
0

J'ai trouvé un bug/bug bizarre ou quelque chose. Mon site a un code simple de deux boutons et deux images. Si vous cliquez sur le bouton (simple h1 avec event-listener), l'une des images tourne autour. Simple. Il fonctionne sur mon MacBook, même sur "Inspect Element" et fonctionne très bien si j'essaie de simuler l'iPhone, etc.Impossible de cliquer sur le h1 sur les appareils mobiles

MAIS! Sur mon iPhone, si je clique sur le h1, rien ne se passe. J'ai tout essayé, je me suis débarrassé de tous les éléments, j'ai essayé z-index, rien n'a aidé!

<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: Il n'y a pas de problème dans jQuery/Javascript si vous tapez:

$(".spin").click() 

Pour vous consoler, ça marche très bien, ça tourne sur le mobile.

Le site pour tester vos idées:

http://uidave.com/wheel/

Bonne chance! Aidez-moi, s'il vous plaît!

Répondre

1

L'iPhone ne reconnaît pas les événements de clic est un very old and reproducible behaviour. Vous pouvez contourner le problème en définissant la propriété CSS cursor: pointer sur l'élément sur lequel vous voulez cliquer.

+0

Wow! Impressionnant! Je ne savais pas à ce sujet. Merci! –