title: window scrollbar shifting element over by about a pixel
body: <p>I have a simple web app that shows a list of twitch streamers, and the list can be longer or shorter depending on whether the user wants to show who's online or offline, the problem is that when goin from long list to short list or vice versa, the window scrollbar pops in and shifts one of my elements over by about a pixel. It might not even be that noticeable but it is driving me crazy. I've tried it in chrome and safari and it didn't have the problem in safari so I think it might be something weird with chrome.</p>
  
  <p>Here is the specific CSS-</p>
  
  <pre><code>.btn-col {
    padding: 0px;
    .cat-btn {
      background-color: white;
      position: relative;
      width: 100%;
      border: 0;
      border-radius: 0px;
      font-weight: bold;
      font-size: 1.25em;
      z-index: 0;
  
      .down-triangle {
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
        border-top: 20px solid black;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        transition: all .3s ease;
        z-index: -10;
      }
  
      .vr {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0px;
        height: 20px;
        border-right: 2px solid $purple;
      }
    }
    #all-btn {
      color: $purple;
      #all-triangle {
        border-top: 15px solid white;
        bottom: -15px;
      }
    }
    #online-btn {
      color: $green;
  
      #online-triangle {
        border-top: 15px solid white;
      }
    }
    #offline-btn {
      color: $red;
  
      #offline-triangle {
        border-top: 15px solid white;
      }
    }
  }
  </code></pre>
  
  <p>And a link to the codepen -<a href="http://codepen.io/Davez01d/pen/MyepzJ?editors=0110" rel="nofollow">http://codepen.io/Davez01d/pen/MyepzJ?editors=0110</a></p>