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:
Bonne chance! Aidez-moi, s'il vous plaît!
Wow! Impressionnant! Je ne savais pas à ce sujet. Merci! –