I have javascript code that seems to work in all browsers and platforms, but it doesn't work in ios and Safari, I've tried to enable JS in preferences, it didn't help. Here is html part of code:

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>

Here is the link on working pen when you are clicking on the card it reverse and random picture is shown, but in safari and ios it shows card back after clicking on card and reversing. Any help and tips would be appreciated.

1 Answers

1
Anthony Spruyt On Best Solutions

I simple add annotation for web-kit transform just like you already do with "-webkit-backface-visibility: hidden".

Chrome is most optimised browser. Safari and chrome share web-kit implementation but chrome looks like reading minds. For safari you must use web-kit prefix for chrome no need.

Try this :

  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>