title: Positioning of jQuery UI select dropdown is off by 1px in Chrome only
body: <p>I have been trying to get my jQuery UI Select dropdown to be aligned on Chrome for some time. Its off by 1px however the list and the parent span.ui-selectmenu-button are both "151px". 
  <img src="https://i.stack.imgur.com/SbJNC.jpg" alt="enter image description here"></p>
  
  <p>All other browsers display it correct.</p>
  
  <p><img src="https://i.stack.imgur.com/FPvSM.jpg" alt="enter image description here"></p>
  
  <p>I've been going through the computer styles one by one but can't find anything.
  Its instantiated with the common:</p>
  
  <pre><code> $("#mainlanguage").selectmenu();
  </code></pre>
  
  <p>And the select box which jQuery uses has basic styling on it. (SCSS)
  jquery ui language !select</p>
  
  <pre><code>.mainSearch{
  .ui-selectmenu-button {
      background:$upsbrown;
      outline-style:none!important; // reset
  
      &amp;.ui-state-hover{
          border:0;
          border-radius:0;
      }
          border:0;
          border-radius:0;
          left: 63.3%;
      span{
          background-color: $upsbrown;
          background-position: 93.5% center;
          //border-top: 1px solid $navtext; 
          color: $navtext;
          font-size: 11px;
          line-height: 18px;
          position: relative;
          padding-left: 6px;
          max-width: 151px;
          height: 21px;
          z-index: 400;
          webkit-appearance: none;
          -moz-appearance: none;
          appearance: none;
          &amp;:focus{
                 -webkit-appearance: none;
                  -moz-appearance: none;
                  appearance: none;
          }
      }
  }
  </code></pre>
  
  <p>}</p>