title: IE 11 css translate issue, flashing
body: <p>So I have a div of <code>.scrollable-sections</code> with the below styles on it, but when it comes to translating this div in IE 11 (which is done by adding a class to the parent of the <code>.scrollable-sections</code>) for some reason it flashes white when it has to translate and it's not a smooth transition.</p>
  
  <p>I have trawled through other answers which is why I'm trying to force a 3d translate and adding backface-visibilty.</p>
  
  <p>I'm all out of options as what else I can try to stop this glitching in ie11. </p>
  
  <p>Can anyone help?</p>
  
  <pre><code>.scrollable-sections {
    position: relative;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform 500ms ease-in-out;
    transition: -webkit-transform 500ms ease-in-out;
    -moz-transition: transform 500ms ease-in-out, 
    -moz-transform 500ms ease-in-out;
    transition: transform 500ms ease-in-out;
  
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0%, 0);
       -moz-transform: translate3d(0, 0%, 0);
            transform: translate3d(0, 0%, 0);
    will-change: "transform transition"; 
  }
  
  .viewport.js-translateX1 .scrollable-sections{
      transform: translate3d(0, -100%, 0);
  }
  </code></pre>