title: Images/CSS Transform not loading in Safari
body: <p>I'm using some (seemingly) basic css inside of a bootstrap frame, and for some reason once I placed my code into bootstrap it started spazzing out and not displaying images or transforming.</p>
  
  <p>If you go <a href="http://www.hearthstonecardbacks.com/test.html" rel="nofollow">here</a> on Chrome/FF/(Even IE) you can see the images load and transform on mouseover. If you load it up on Safari though it just sits there and only displays what should be the back of the card.</p>
  
  <p>I've been tearing my hair out about this for hours, any advice would be greatly appreciated!</p>
  
  <p>Thanks :)</p>
  
  <p>My code is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&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;title&gt;Bootstrap 101 Template&lt;/title&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" type="text/css" href="/dickshit.css"&gt;
      &lt;!--[if lt IE 9]&gt;
      &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="col-md-6 col-md-offset-3"&gt;
  
  &lt;div id="f2_container"&gt;
  &lt;div id="f2_card" class="shadow"&gt;
    &lt;div class="front face"&gt;
      &lt;img src="/cardbacks/default.png" height="359" width="241"/&gt;
    &lt;/div&gt;
    &lt;div class="back face center"&gt;
      &lt;p&gt;This is nice for exposing more information about an image.&lt;/p&gt;
      &lt;p&gt;Any content can go here.&lt;/p&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
      &lt;/div&gt;&lt;/div&gt;
  
  
      &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My CSS is:</p>
  
  <pre><code>.face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  .face.back {
    display: block;
    transform: rotateY(180deg);
    box-sizing: border-box;
    border-radius: 10px;
    padding: 10px;
    color: white;
    text-align: center;
    background-color: #aaa;
  }
  
  
  #f1_container {
    position: relative;
    float: left;
    margin: 10px 20px 10px  auto;
    width: 241px;
    height: 359px;
    z-index: 1;
  }
  #f1_container {
    perspective: 1000;
  }
  #f1_card {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 1.0s linear;
  }
  #f1_container:hover #f1_card {
    transform: rotateY(180deg);
  }
  
  #f2_container {
    position: relative;
    float: left;
    margin: 10px 20px 10px auto;
    width: 241px;
    height: 359px;
    z-index: 1;
  }
  #f2_container {
    perspective: 1000;
  }
  #f2_card {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 1.0s linear;
  }
  #f2_container:hover #f2_card {
    transform: rotateY(180deg);
  }
  </code></pre>