safariにおけるCSSアニメーションのちらつきについて

Question

前提・実現したいこと

CSSを使ってアニメーションを実装しているのですが、
safariだけでバグがあり、ご質問させていただきます。

発生している問題・エラーメッセージ

イメージとしては、（1文字づつふわっとでてくる）というもので、そのアニメーション自体はできるのですが、
フォントをイタリック体にすると、傾いた文字の1文字づつの両端が切れてしまいます。

説明がむずかしいのですが、（文字のボックスに収まっていない文字のハネなどが、切れる）という感じです。

また、aタグなどで囲っていると、マウスオーバー時、文字がちらついたりします。

該当のソースコード

HTML
<p>
<span>T</span>
<span>E</span>
<span>X</span>
<span>T</span>
</p>


CSS
p { font-style:italic; }
span { display:inline-block; }


CSSアニメーション（前後省略）
0% { opacity:0; transform:translateY(75%) rotateX(-90deg); }
100% { opacity:1; transform:translateY(0%) rotateX(0deg); }

補足情報

oveflow:hidden;などはしていません。

フォントは、googleフォントの（Playfair Display）のイタリック体です。

どなたか何か解消の手がかりになるものをご存知ではありませんでしょうか？

よろしくお願いいたします。

Answer 1

文字の端が切れる問題はpaddingとmarginを掛け合わすことで文字間隔を保ったまま解決できると思います。（切れるのは右端だけかと思うので以下は右側だけの対応です。）

span {
  display:inline-block;
  padding-right: .2rem;
  margin-right: -.2rem;  /* paddingで指定した幅をマイナスmarginで戻す */
}

ちらつきに関しては再現できなかったので、その現象が起きるhtmlをご提示願えますか。

Comments

[resix]

ご回答ありがとうございます。

いただいたもので解決しました！ただただ感動です。
ちらつきもなぜか一緒に解決しました。

本当にありがとうございます。
ご回答いただいた皆様、ありがとうございました。

Answer 2

根本解決にはなりませんが、文字が欠けるバグには以下の対応が考えられます。

p { 
  font-style:oblique; 
}

イタリック体と斜体が違うものというのは私も知りませんでした。
Playfair Displayに斜体の設定がないと厳しいですが、、

ちらつきに関しては再現できませんでした。

Comments

[resix]

ご回答ありがとうございます。
試してみましたが、ダメでした、、

普通に表示するぶんには、問題ないのですが、
inline-blockで囲んで、transformやらopacityやらをくわえるとなるみたいです。

もう少し調べてみます。

Playfair Displayのイタリック体が、ダウンロードしても、safariだと、font-styleを指定しないと表示できないのはなぜなのか、、、