html5 <select> Element Offset-Problem auf dem Mac

Question

Ich habe dieses Problem auf meinem Macbook, die nicht auf einem Windows-Computer passiert, obwohl ich den gleichen Browser (Chrome) mit beiden Computern verwenden.

Die Optionen des Elementes werden versetzt und erscheinen auf der Seite des Elements, anstatt normal auf der Unterseite zu öffnen.

Weiß jemand dieses Problem?

danke.

HTML:

<div class="col-lg-4 right"> 
     <select class="my-select" ng-model="chosenContact" ng-options="contact.name for contact in contacts"> 
      <option value="" class="my-select" disabled="true">-choose-</option> 
     </select> 
    </div> 

CSS:

.my-select{ 
margin-left: 10px; 
width: 100%; 
height: 30px; 

direction: rtl; 

text-align: center; 
font-size: 13.4px; 
font-size: 14px; 
line-height: 1.42857143; 
color: #555; 

background-color: #fff; 
background-image: none; 

border: 1px solid #ccc; 
border-radius: 4px; 

box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
outline: none; 

transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 

}

example

Answer 1

Es ist die direction: rtl Eigenschaft, die das Problem verursacht (Ich habe dieses Problem nicht in Safari oder Firefox Mac btw, wird korrekt angezeigt). Dies könnte ein Chrome-Bug sein?