編集 2016-07-04（この質問は人気が出てきているので）：これはChromeのバグです開発者は修正に積極的に取り組んでいます。
編集 2017-05-14バグは修正されたようです。修正はクローム60
編集 2018-05-04修正はマージされましたが、バグはまだ存在しているようだ。
つまり、この CSS によって画面の中央に配置される、非常に見苦しいウィンドウができます。
.popup
{
position: fixed;
top: 0;
bottom: 0;
transform: translate(-50%, -50%);
}
ただし、Chrome では次のようになります (フォントが非常にぼやけて見えます)。
しかし、Firefox では次のようになります:
ルールを削除するとtransform、テキストは再びきれいに鮮明に表示されますが、正しく中央揃えされなくなります。
chrome://flags実行してみると#disable-direct-write見た目は良くなりますが、ユーザーがそうすることは明らかにないので、問題は解決されません。
ウィンドウを中央に配置したまま、フォントの見栄えを良くするにはどうすればよいでしょうか?
私のChromeのバージョンは44.0.2403.155
three.js背景キャンバスにレンダリングする WebGL を使用したデモがあります。デモを無効にすると、問題は発生しなくなります。
ベストアンサー1
関連するディスカッションからの提案により、問題は解決しました。https://stackoverflow.com/a/46117022/7375996
私の場合は、オフセット付きの calc を使用することで問題が解決しました。
transform: translate(calc(-50% + 0.5px), calc(-50% + 0.5px));