title: Transform and transition not working in iOS Safari
body: <p>I did a simple page to display short messages on a "card" div element when the user clicks on that div. I researched and found CSS classes to use to make the div look like it's flipping from front to back when the user clicks. Pretty simple: the front of the card says "Click me", you click it, the card flips around and displays a message I defined in a string array in JS. You click again and the card flips back over to the front and again displays "Click me". The problem is I just learned that although it works fine in all my Windows browsers and Android browsers, it does NOT work in Safari on iOS. Specifically...</p>
  
  <p>After clicking the card front, after the flip, the text in the messages seems to randomly display <strong>backwards</strong>(??). Also...again, not all the time...sometimes instead of waiting for the click/tap on the card to flip back to the front, Safari quickly flips it back over on its own, without waiting. Totally wrong.</p>
  
  <p>Examples:</p>
  
  <pre><code>&lt;style&gt;
  body {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
          background: lavenderblush;
      }
  
      .scene {
          width: 200px;
          height: 260px;
          margin: 40px 0;
          perspective: 600px;
  
      }
  
      .card {
          width: 100%;
          height: 100%;
    -webkit-transition: transform 1s;
          transition: transform 1s;
    -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
          cursor: pointer;
          position: relative;
          border-radius: 25px;
          background:white;
          border: 1px solid #CCC;
      }
  
      .card.is-flipped {
    -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
      }
  
      .card__face {
          position: absolute;
          width: 100%;
          height: 100%;
          color: white;
          text-align: center;
          font-size: 20px;
          backface-visibility: hidden;
          display: inline-block;
          border-radius: 25px;
      }
  
      .card__face--front {
          background-image: url("https://www.w3schools.com/html/pic_trulli.jpg");
          background-size: 100%;
          background-repeat: no-repeat;
          height:100%;
      }
  
      .card__face--back {
          background: lightskyblue;
    -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
          word-wrap: normal;
          line-height: 260px;
          height:100%;
          display: inline-block; 
          vertical-align: middle;
      }
  
      #message {
          line-height: 1.5;
          display: inline-block;
          vertical-align: middle;
      }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>The flipping effect is done with transform, transition, and transform-style classes, so I figured those weren't properly supported in iOS Safari, so I added -webkit-transform, -webkit-transition, and -webkit-transform-style classes for each of those...but it's still broken when I test it in BrowserStack (I don't own a Mac or iOS device). I made a codepen <a href="https://codepen.io/ziggy_zaggy/pen/qBBzBdg" rel="nofollow noreferrer">here</a>.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="scene scene--card"&gt;
      &lt;div class="card"&gt;
          &lt;div class="card__face card__face--front"&gt;
              &lt;span&gt;Click Me!&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="card__face card__face--back"&gt;
              &lt;p id="message"&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var card = document.querySelector('.card');
  var counter = 0;
  
  var messages = [
      "Hello",
      "world",
      "How",
      "are",
      "you?"
  ];
  
  card.addEventListener('click', function () {
  
      var whichCard = card.classList.value;
      if (whichCard == "card") {
          getMessage();
      }
  
      card.classList.toggle('is-flipped');
  });
  
  function getMessage() {
      //var randomIndex = Math.floor(Math.random() * messages.length); 
      document.getElementById("message").innerHTML = messages[counter];
      incrementCounter();
  }
  
  function incrementCounter() {
      counter++;
      if (counter &gt;= messages.length) {
          counter = 0;
      }
  }
  </code></pre>
  
  <p>Can someone please take a look and tell me what would make this break on iOS Safari (or maybe Safari on Mac desktop too? I don't know)? Thanks.</p>