title: CSS3 Transitions not working on iOS Safari
body: <p>For some reason, my CSS3 Transitions are working on every browser except for on Safari (tested on iOS). I believe I've done everything right, but it's just not working.</p>
  
  <p>Codepen: <a href="https://codepen.io/KingKundi/pen/RgMmJp" rel="nofollow noreferrer">https://codepen.io/KingKundi/pen/RgMmJp</a></p>
  
  <p>HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> /*
      ==========================
      Universal
      ==========================
      */
      
      * {
        font-family: "Heebo";
      }
      
      h1 {
        font-size: 4rem;
        color: #4d4d4d;
      }
      
      h4 {
        font-size: 2rem;
        color: #0072ff;
      }
      
      h2 {
        font-size: 2.5rem;
        color: #0072ff;
        padding: 2rem 2rem;
      }
      
      p {
        line-height: 2rem;
        padding: 0 2rem;
        font-size: 1.3rem;
        color: #4d4d4d;
      }
      
      a {
        outline: none;
      }
      
      .center {
        margin-left: auto;
        margin-right: auto;
      }
      
      .center-text {
        text-align: center;
      }
      
      .center-v {
        display: flex;
        align-items: center;
      }
      
      /*
      ==========================
      Home
      ==========================
      */
      
      .hero {
        background-color: #ffffff;
      }
      
      .intro {
        padding-top: 5rem;
      }
      
      .img-circle {
        border-radius: 50%;
      }
      
      .hero-link {
        color: #000000;
        font-size: 3rem;
      }
      
      .fa {
        font-size: 5.5rem;
        padding: 0.5rem 2rem;
        color: #4d4d4d;
      }
      
      .fa:focus {
        color: #4d4d4d;
      }
      
      .fa:hover {
        color: #0072ff;
      }
      
      .fa-home {
          font-size: 3rem;
          position: fixed;
      }
      
      .fa-project {
          color: #ffffff;
          z-index: 11;
        font-size: 4rem;
        position: absolute;
        bottom: 0;
        right: 0;
      }
      
      /*
      ==========================
      Project tiles
      ==========================
      */
      
      @media (max-width: 1000px) {
        #project-break {
          width: 100%;
          margin-left: 0;
        }
      }
      
      .tile {
        height: 27rem;
        width: 100%;
        margin:10px;
        display:inline-block;
        background-size:cover;
        position:relative;
        cursor:pointer;
        -webkit-transition: all 0.4s ease-out;
        -o-transition: all 0.4s ease-out;
        -moz-transition: all 0.4s ease-out;
        -ms-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
        box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.44);
        overflow:hidden;
        color:white;
      }
      
      .tile img {
        height:100%;
        width:100%;
        position:absolute;
        top:0;
        left:0;
        z-index:0;
          -webkit-transition: all 0.4s ease-out;
        -o-transition: all 0.4s ease-out;
        -moz-transition: all 0.4s ease-out;
        -ms-transition: all 0.4s ease-out;
        transition: all 0.4s ease-out;
      }
      
      .tile .text {
          z-index: 11;
        position:absolute;
        padding:30px;
        height:calc(100% - 60px);
      }
      
      .tile h1 {
          color: #ffffff;
        font-size: 1.75rem;
        font-weight:300;
        text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
      }
      
      .tile p {
          color: #ffffff;
        font-weight: 300;
        margin: 20px 0 0 0;
          -webkit-transform: translateX(-200px);
          -o-transform: translateX(-200px);
          -moz-transform: translateX(-200px);
          -ms-transform: translateX(-200px);
        transform: translateX(-200px);
        transition-delay: 0.2s;
      }
      
      .animate-text {
        opacity:0;
        -webkit-transition: all 0.6s ease-in-out;
        -o-transition: all 0.6s ease-in-out;
        -moz-transition: all 0.6s ease-in-out;
        -ms-transition: all 0.6s ease-in-out;
        transition: all 0.6s ease-in-out;
      }
      
      .tile:hover {
        box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.64);
        -webkit-transform: scale(1.05);
        -o-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05);
      }
      
      .tile:hover img {
        opacity: 0.2;
      }
      
      .tile:hover .animate-text {
        -webkit-transform: translateX(0);
        -o-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        opacity:1;
      }
      
      /*
      .tile:hover span {
        opacity:1;
        transform:translateY(0px);
          -webkit-transform:translateY(0px);
          -o-transform:translateY(0px);
          -moz-transform:translateY(0px);
          -ms-transform:translateY(0px);
      }
      */
      
      @media (max-width: 550px) {
          .tile p {
              font-size: 1.1rem;
              line-height: 1.5rem;
          }
      }
      
      @media (max-width: 320px) {
          .tile p {
              font-size: 0.9rem;
              line-height: 1.5rem;
          }
      }
      
      .fa-fade {
          -webkit-transition: all 0.2s ease-in-out;
          -o-transition: all 0.2s ease-in-out;
          -moz-transition: all 0.2s ease-in-out;
          -ms-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
      }
      
      .pomodoro {
        background-image: url("assets/pomodoro-site.png");
          background-position: center;
      }
      
      .duelr {
        background-image: url("assets/duelr-site.png");
          background-position: center;
      }
      
      .grt-bot {
        background-image: url("assets/grt-site.png");
          background-position: center;
      }
      
      .pomodoro:after,
      .duelr:after,
      .grt-bot:after {
        content: " ";
        z-index: 10;
        position: absolute;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.7);
      }
      
      p &gt; a {
          color: #ffffff;
      }
      
      p &gt; a:hover {
          color: #0072ff;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      
      &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
        &lt;script src="https://use.fontawesome.com/7743338bf9.js"&gt;&lt;/script&gt;
        &lt;link href="https://fonts.googleapis.com/css?family=Heebo" rel="stylesheet"&gt;
        &lt;link rel="stylesheet" href="static/normalize.css"&gt;
        &lt;link rel="stylesheet" href="static/skeleton.css"&gt;
        &lt;link rel="stylesheet" href="static/main.css"&gt;
        &lt;link rel="icon" href="static/assets/favicon.png"&gt;
      &lt;/head&gt;
      
      &lt;body&gt;
        &lt;div class="hero center-text"&gt;
          &lt;div class="container"&gt;
            &lt;section class="intro twelve columns"&gt;
            &lt;div class="row"&gt;
              &lt;h2&gt;projects&lt;/h2&gt;
              &lt;div class="row"&gt;
                &lt;div class="one-half column" id="project-break"&gt;
                  &lt;div class="tile u-max-full-width pomodoro"&gt;
                    &lt;div class="text center-text"&gt;
                      &lt;h1&gt;Pomodoro&lt;/h1&gt;
                      &lt;p class="animate-text"&gt;
                        Pomodoro is a productivity oriented web application which incentivizes the&lt;br&gt;&lt;a href="https://en.wikipedia.org/wiki/Pomodoro_Technique" target="_blank"&gt;Pomodoro Technique&lt;/a&gt;.
                      &lt;/p&gt;
                      &lt;p class="animate-text"&gt;
                        Built with: Django/Python, HTML5, CSS, JavaScript, jQuery, and AJAX.
                      &lt;/p&gt;
                    &lt;/div&gt;
                    &lt;a href="#" target="_blank"&gt;&lt;i class="fa fa-github fa-project animate-text fa-fade" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="one-half column" id="project-break"&gt;
                  &lt;div class="tile u-max-full-width duelr"&gt;
                    &lt;div class="text center-text"&gt;
                      &lt;h1&gt;Duelr&lt;/h1&gt;
                      &lt;p class="animate-text"&gt;
                        An online multiplayer 1v1 fighting game.
                      &lt;/p&gt;
                      &lt;p class="animate-text"&gt;
                        Built with: JavaScript, Node.js, Express.js, Socket.io, HTML5, CSS, and Phaser.
                      &lt;/p&gt;
                    &lt;/div&gt;
                    &lt;a href="#" target="_blank"&gt;&lt;i class="fa fa-github fa-project animate-text fa-fade" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                &lt;div class="twelve columns"&gt;
                  &lt;div class="tile u-max-full-width center grt-bot"&gt;
                    &lt;div class="text center-text"&gt;
                      &lt;h1&gt;GRT Messenger Bot&lt;/h1&gt;
                      &lt;p class="animate-text"&gt;
                        The Grand River Transit Bot is a service published on Facebook Messenger which yields real-time bus information to users through HTTP requests.
                      &lt;/p&gt;
                      &lt;p class="animate-text"&gt;
                        Built with: JavaScript, Node.js, Express.js, and API.ai.
                      &lt;/p&gt;
                    &lt;/div&gt;
                    &lt;a href="#" target="_blank"&gt;&lt;i class="fa fa-github fa-project animate-text fa-fade" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="row"&gt;
              &lt;h2&gt;contact&lt;/h2&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;script src="static/app.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
      
      &lt;/html&gt;
  
     </code></pre>
  </div>
  </div>
  </p>