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>

Вот ссылка на работающую ручку , когда вы нажимаете на карту, она переворачивается и отображается случайное изображение, нов Safari и IOS показывает карту обратно после нажатия на карту и реверса.Любая помощь и советы будут оценены.

Answer 1

Я просто добавляю аннотацию для преобразования веб-набора точно так же, как вы уже это делаете с "-webkit-backface-visibility: hidden".

Chrome - самый оптимизированный браузер.Safari и Chrome совместно используют реализацию веб-комплекта, но Chrome выглядит как чтение мыслей.Для сафари вы должны использовать префикс веб-набора для хрома не нужно.

Попробуйте это:

  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>