title: Safari CSS Transition flickering
body: <p>I have a problem with a webpage I'm working on. On Firefox it doesn't seem to have any problems. </p>
  
  <p>I have 2 elements, horizontal scrolling, with background images and the transition between those 2 is made using CSS3, <code>transformX()</code>. At first these 2 elements overlay (so that you can see the background image of the 2nd element), when you click the right arrow the second element slides from right to left in front. When you click right the first element slides from left to right</p>
  
  <p>When I go back to the first element, the second element flickers, like rearranging its position.</p>
  
  <pre><code>.first-container.first-container1 {
      background: transparent url('../img/backgrounds/first1-background.jpg') no-repeat center center;
      background-size: cover;
      left: 0;
  }
  .first-container.first-container2 {
      background: transparent url('../img/backgrounds/first2-background.jpg') no-repeat center center;
      background-size: cover;
      left: 100%;
  }
  
  
  .bs-first .first1 .first-container.first-container2 {
      -webkit-transform: translateX(-8.5%);
      -moz-transform: translateX(-8.5%);
      -o-transform: translateX(-8.5%);
      -ms-transform: translateX(-8.5%);
      transform: translateX(-8.5%);
  }
  
  .first2 .first-container.first-container1 {
      -webkit-transform: translateX(8.5%);
      -moz-transform: translateX(8.5%);
      -o-transform: translateX(8.5%);
      -ms-transform: translateX(8.5%);
      transform: translateX(8.5%);
      z-index: 9;
  }
  </code></pre>
  
  <p>I could really use a few hints on how i could solve this. Thank you!</p>