現在開発中の Web システムに、CSS の transform プロパティで scale() を使って、指定した要素を動的に拡大・縮小するという機能があるのですが、こちらで要素の拡大を行ったところ、display: grid で表示している子要素の一部が親要素からはみ出して見えなくなるという現象が発生しました。
width で横幅を変えてみたり、overflow プロパティの設定値を確認したりもしたのですが、解決策が見つからず…。
そんな中、下記の記事が検索にヒットしました。
【CSS小ネタ】画像サイズを変えずに拡大表示する。 – Qiita
https://qiita.com/YJ2222/items/8fd68796289f5ff3237a
上記の記事は画像にマウスのカーソルを合わせた際に拡大する方法について紹介しています。
よくブログのサムネイルなんかで使われているやつですね。
その中で transition というプロパティがあり、こちらを追加したところ解決しました！
実は、これが解決策になるのでは？とは全く考えず、単純にどういう動作になるのかを見てみたいというだけで導入したのですが…まさかこれで直るとは正直思っていませんでした。
まあ、直ったのでヨシ！
なお、上記を設定していても、Slider などを使って、拡大・縮小をダイナミックに行うと、子要素の一部が表示されない不具合は発生するので、ボタン等を使って 10% ずつ小刻みに変更できるようにしたほうが良さそうでした。
以上、CSS で要素の拡大・縮小を動的に行ったときに、子要素の一部が親要素の範囲からはみ出て表示されない不具合の対処方法についてでした。
ご参考になれば幸いです。
