Safari 9.1.3 проблема с шириной границы

Question

Так что я не уверен, что происходит, но в Safari 9.1.3 ширина границы элементов с определенной комбинацией других стилей создает неожиданные результаты. В принципе, я применяю преобразование на абсолютно позиционированном элементе, чтобы получить горизонтальное центрирование элемента переменной ширины.

HTML:

<div class="border"> 
    <div class="border__text"> 
     test 
    </div> 
</div> 

CSS

.border { 
    position: absolute; 
    left: 50%; 
    padding: 50px; 
    border: 1px solid #666666; 
    transform: translateX(-50%); 
} 

.border__text { 
    font-size: 12px; 
    font-style: italic; 
    font-family: "Times New Roman", Times, serif; 
} 

Скриншот

Codepen

Try this in Safari 9.3.1

я могу заставить его работать, если изменить размер шрифта 11 или 13 пикселей, но я хотел бы, чтобы это было 12, и я могу заставить его работать, если удалить преобразование, но я не уверен в том, что можно легко центрировать абсолютно позиционированный элемент без него.

Answer 1

Не используйте transform, сделать как этот

.border { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
} 
 

 
.border__text { 
 
    display: inline-block; 
 
    font-size: 12px; 
 
    padding: 10px 50px; 
 
    border: 1px solid #666666; 
 
}

<div class='border'> 
 
    <div class='border__text'>test</div> 
 
</div>