質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.38%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

844閲覧

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

ochomo

総合スコア5

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/03/31 06:25

編集2021/03/31 07:23

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

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

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

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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; で下線が出ないようにできました。 ありがとうございました!
guest

回答1

0

自己解決

以下の2行を追加することで解決しました。

-webkit-backface-visibility:hidden;
backface-visibility:hidden;

投稿2021/04/03 04:10

ochomo

総合スコア5

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.38%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問