html5 <select> проблема смещения элемента на Mac

Question

У меня есть такая проблема на моем MacBook, которая не возникает на компьютере с Windows, хотя я использую один и тот же браузер (Chrome) с обоими компьютерами.

Параметры элемента смещаются и отображаются на стороне элемента, вместо того, чтобы нормально открываться на его нижней стороне.

Кто-нибудь знает эту проблему?

Благодарю.

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;

}

пример

Answer 1

Это direction: rtl свойство, которое вызывает вашу проблему (у меня нет этой проблемы в Safari или Firefox Mac, кстати, отображается правильно). Это может быть ошибка Chrome?