JSFiddle - React, Tailwind, and code Playground

by Oleg Khobotov

HTML

<article>
    <h1>Header</h1>
</article>

CSS

article{
    position: relative;
    margin: 5em;
    width: 500px;
    height: 300px;
    border: 2px dashed #EBACCA;         
}
h1{
    position: absolute;
    top: 50%;
    left: 50%;
    color: #AD1DA5;
    font-weight: normal;
    font-size: 20px;
    font-family: "Arial Narrow", Arial, sans-serif;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); 
}

JavaScript

// Под макосью в Opera 11.64 заголовок рендерится с очень тонким начертанием, если убрать transform - баг пропадает. Похоже, что проблема наблюдается только под макосью, на винде все ок.