title: CSS transition causing briefly causing white space
body: <p>Link to the pen <a href="http://codepen.io/mikeCaley/pen/VpYrEq" rel="nofollow noreferrer">http://codepen.io/mikeCaley/pen/VpYrEq</a></p>
  
  <p>The transition is working how I want except when you quickly move your mouse across from one side to the other you will see that white space appears on the right. </p>
  
  <p>I can't understand why this is because the transition speed for all the divs is the same.</p>
  
  <p>The only fix I have come up with is to match the background colour, however I need a more robust solution (and would also like to know why this is happening)</p>
  
  <pre><code>&lt;div class="slider-wrap"&gt;
    &lt;div class="placeholder p1"&gt;&lt;/div&gt;
    &lt;div class="placeholder p2"&gt;&lt;/div&gt;
    &lt;div class="placeholder p3"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  body,
  html {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  .slider-wrap {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    font-size:0;
    outline: solid black 0.1px;
    box-sizing: border-box;
  }
  
  .placeholder {
    position: relative;
    display: inline-block;
    height: 100%;
    width: 33.3333%;
    background-color: black;
    background-size: cover;
    background-position: 41% 0px;
    background-repeat: no-repeat;
    transition: width 0.4s linear;
  }
  
  .p1 {
    background-image: url(https://riverisland.scene7.com/is/image/RiverIsland/C20170224_P1_Spring_970x500_2_DNT?$retina$);
    left:0;
  }
  
  .p2 {
    background-image: url(https://riverisland.scene7.com/is/image/RiverIsland/C20170224_P1_Spring_970x500_1_DNT?$retina$);
  }
  
  .p3 {
    background-image: url(https://riverisland.scene7.com/is/image/RiverIsland/C20170224_P1_Spring_970x500_3_DNT?$retina$);
  }
  
  .slider-wrap:hover .p1,
  .slider-wrap:hover .p2,
  .slider-wrap:hover .p3 {
    width:30%;
  }
  
  .slider-wrap .p1:hover {
    width: 40%;
  }
  .slider-wrap .p2:hover {
    width: 40%;
  }
  .slider-wrap .p3:hover {
    width: 40%;
  }
  </code></pre>
  
  <p>Thank you</p>