Javascript 代码在 ios 和 Safari 中不起作用

Question

我的 javascript 代码似乎适用于所有浏览器和平台，但它不适用于 ios 和 Safari，我尝试在首选项中启用 JS，但没有帮助。这是代码的html部分:

var images = [];

      (function() {
        generateCards()
      })();

      var cards = document.querySelectorAll('.card');

      Array.from(cards).forEach(function(card) {
        card.addEventListener('click', function() {
          Array.from(card.querySelectorAll('.back, .front')).forEach(function(el) {
            ['back', 'front'].forEach(function(s) {
              el.classList.toggle(s)
            });
          });
        });
      });

      //Displaying different images on click
      function cardImg(index) {
        var cardNewImg = randomIntFromInterval(2,10);
        if (images[index] !== undefined) 
        {
          images[index] = -1;
        }
          
        while (images.indexOf(cardNewImg)!= -1){
          cardNewImg = randomIntFromInterval(2,11); 
        }  
        images[index] = cardNewImg;
      }

      function generateCards() {
        for (var i = 0; i < 3; i++) {
          cardImg(i);
        }
      }

      function getCard(index) {
        if(!images[index].valid) {
          cardImg(index)
        }
        document["randimg"+(index + 1)].src = "https://lp.rustaro.ru/wp-content/uploads/transformation/cards/" + images[index]+".jpg";
      }

      function randomIntFromInterval(min,max)
      {
        return Math.floor(Math.random()*(max-min+1)+min);
      }

body {
	font-family: sans-serif;
}

.hidden {
	display: none;
}

.wrap {
	position: absolute;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	background: #A770EF;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #FDB99B, #CF8BF3, #A770EF);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #FDB99B, #CF8BF3, #A770EF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	display: flex;
	justify-content: center;
	align-items: center;
}

.card {
	width: 200px;
	height: 345px;
	position: relative;
	perspective: 1000px;
	cursor: pointer;
	margin: 0 50px;
}

.front, .back {
	width: 100%;
	height: 100%;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 1s;
	backface-visibility: hidden;
	border-radius: 10px;
}

.front {
	transform: rotateY(360deg);
}

.back  {
	transform: rotateY(180deg);
}

.front:hover {
  transform: scale(1.1);
  -webkit-box-shadow: 0px 0px 20px 5px rgba(255,255,255,1);
  -moz-box-shadow: 0px 0px 20px 5px rgba(255,255,255,1);
  box-shadow: 0px 0px 20px 5px rgba(255,255,255,1);
}

.img1 {
	width: 200px;
	border-radius: 10px;
	height: 345px;
}

<div class="wrap">
		<div class="card">
			<div class="front" onclick="getCard(0)"><img class="img1" src="https://lp.rustaro.ru/wp-content/uploads/transformation/cards/1.jpg" alt=""></div>
			<div class="back"><img class="img1" src="" name="randimg1"></div>
		</div>
		<div class="card">
			<div class="front" onclick="getCard(1)"><img class="img1" src="https://lp.rustaro.ru/wp-content/uploads/transformation/cards/1.jpg" alt=""></div>
			<div class="back"><img class="img1" src="" name="randimg2"></div>
		</div>
		<div class="card">
			<div class="front" onclick="getCard(2)"><img class="img1" src="https://lp.rustaro.ru/wp-content/uploads/transformation/cards/1.jpg" alt=""></div>
			<div class="back"><img class="img1" src="" name="randimg3"></div>
		</div>
	</div>

这是关于工作的链接pen当您单击卡片时，它会反转并显示随机图片，但在 safari 和 ios 中，它会在单击卡片并反转后显示卡片。任何帮助和提示将不胜感激。

Answer 1

我简单地为 web-kit 转换添加注释，就像您已经使用“-webkit-backface-visibility: hidden”所做的那样。

Chrome 是最优化的浏览器。 Safari 和 chrome 共享 web-kit 实现，但 chrome 看起来像读心术。对于 safari，您必须为 chrome 使用 web-kit 前缀，无需。

试试这个:

  var images = [];

  (function() {
    generateCards()
  })();

  var cards = document.querySelectorAll('.card');

  Array.from(cards).forEach(function(card) {
    card.addEventListener('click', function() {
      Array.from(card.querySelectorAll('.back, .front')).forEach(function(el) {
        ['back', 'front'].forEach(function(s) {
          el.classList.toggle(s)
        });
      });
    });
  });

  //Displaying different images on click
  function cardImg(index) {
    var cardNewImg = randomIntFromInterval(2,10);
    if (images[index] !== undefined) 
    {
      images[index] = -1;
    }

    while (images.indexOf(cardNewImg)!= -1){
      cardNewImg = randomIntFromInterval(2,11); 
    }  
    images[index] = cardNewImg;
  }

  function generateCards() {
    for (var i = 0; i < 3; i++) {
      cardImg(i);
    }
  }

  function getCard(index) {
    if(!images[index].valid) {
      cardImg(index)
    }
    document["randimg"+(index + 1)].src = "https://lp.rustaro.ru/wp-content/uploads/transformation/cards/" + images[index]+".jpg";
  }

  function randomIntFromInterval(min,max)
  {
    return Math.floor(Math.random()*(max-min+1)+min);
  }
  

body {
	font-family: sans-serif;
}

.hidden {
	display: none;
}

.wrap {
	position: absolute;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	background: #A770EF;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #FDB99B, #CF8BF3, #A770EF);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #FDB99B, #CF8BF3, #A770EF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	display: flex;
	justify-content: center;
	align-items: center;
}

.card {
	width: 200px;
	height: 345px;
	position: relative;
	perspective: 1000px;
	cursor: pointer;
	margin: 0 50px;
}

.front, .back {
	width: 100%;
	height: 100%;
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 1s;
	backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
	border-radius: 10px;
}

.front {
	transform: rotateY(360deg);
  -webkit-transform: rotateY(360deg);
}

.back  {
	transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.front:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -webkit-box-shadow: 0px 0px 20px 5px rgba(255,255,255,1);
  -moz-box-shadow: 0px 0px 20px 5px rgba(255,255,255,1);
  box-shadow: 0px 0px 20px 5px rgba(255,255,255,1);
}

.img1 {
	width: 200px;
	border-radius: 10px;
	height: 345px;
}

<div class="wrap">
    <div class="card">
        <div class="front" onclick="getCard(0)"><img class="img1" src="https://lp.rustaro.ru/wp-content/uploads/transformation/cards/1.jpg" alt=""></div>
        <div class="back"><img class="img1" src="" name="randimg1"></div>
    </div>
    <div class="card">
        <div class="front" onclick="getCard(1)"><img class="img1" src="https://lp.rustaro.ru/wp-content/uploads/transformation/cards/1.jpg" alt=""></div>
        <div class="back"><img class="img1" src="" name="randimg2"></div>
    </div>
    <div class="card">
        <div class="front" onclick="getCard(2)"><img class="img1" src="https://lp.rustaro.ru/wp-content/uploads/transformation/cards/1.jpg" alt=""></div>
        <div class="back"><img class="img1" src="" name="randimg3"></div>
    </div>
</div>