Safariで要素を回転させた際に表示されるアウトラインをどうにかする

文字で説明するとわかりにくいですが、画像を見ればすぐにわかる内容だと思います。

前提と実現したいこと

• detailsタグ内のsummaryに擬似要素で開閉を示すアイコンを設定
• 開いた際に開閉アイコンをcssのrotateで回転させる

上記前提で下記の問題が起こります。

• Safariで閲覧時、アイコンが回転するとアウトラインが変化し、アイコン右下に出っ張りができる

今回はこの問題に対する対応策のメモです。

対応策1

• summaryにoverflow:hidden;を設定する

最も簡単な方法だと思いますが、hiddenを使うと都合が悪い装飾が設定されている場合には使えません。

対応策2

• 擬似要素をやめてimgタグで実装
• imgタグを包含するタグを作る

回転させる対象をimgタグとし、そのimgタグをdivやspanで囲むと解消できました。

仮に解消できな場合でも、imgタグを囲んだタグにhiddenを設定すれば解消できると思います。

そもそもこの出っ張りはなんなのか？

結論から言うと、調査しても答えにたどり着いていません。そこで調べたことをメモ的に。

• cssのoutlineを設定すると消える
• 出っ張りを形成するボックスのサイズは、回転させる要素のサイズと同じ
• transform-originを変更しても変化はない
• 確認した範囲では他の要素に影響を与えていない

結び

作り方によっては全く発生しないため気付くことがない場合が多いですが、遭遇すると時間を取られる事柄でした。