cssのtranslateXで左から表示する前に、下に線が出てしまう

【悩んでいること】
CSSのtranslateXを使用して、写真が左からカーテンのように表示するアニメーションを作成しましたが、表示前に下に下線が出てしまいます。
macでは下線は表示されず、windowsだと出てきてしまうようです。
https://codepen.io/tomokot/pen/MWJbZOB

beforeのホワイトを下にずらせばいいのかと思っていますが、bottom:-1にするとうまく作動しないみたいです。

ご回答頂ければ幸いです。

Lhankor_Mhy

2021/03/31 07:19

拝見しましたが、下線というのがどれのことかわかりませんでした。

ochomo

2021/03/31 07:24

下線部分をスクショいたしました。

Lhankor_Mhy

2021/03/31 08:02

現象を確認できませんでした。現象が起きる環境をご提示ください。

mari.rinn

2021/03/31 10:20 編集

読ませて頂いて、私もtransformかけてる画像が一瞬先に下線が表示される（winです）ので、ちょっと気になってたので、あれ、やっぱり他にもいるのかと思い、ググってこういうページを見つけました。 https://yumeirodesign.jp/blog/201312/csstransforms-fixed.html#section-4 自分でまだ試してないので関係あるかもわからないのですが、試してみる価値はあるのかもです。良ければ。

ochomo

2021/04/03 04:10

-webkit-backface-visibility:hidden; backface-visibility:hidden; で下線が出ないようにできました。ありがとうございました！