久々にソーシャル・ネットワークのアイコン的なものを作ろうとしていた所、オンマウスで画像のコンテナのサイズが微妙に変わり、画像の位置が微妙にずれるという現象に遭遇した。どうやら%単位でpaddingプロパティーを指定すると起こるようだ。Chrome 35のバグっぽい。
Demo: Image Displacement on Hover
親がfloatプロパティーを使っていたり、display: inline-bockだったりして、子の画像の大きさによりサイズが変化する場合にのみこのバグは再現できる。ずれの量はタイミングと画像のサイズによって変化する。
何がずれているのかを明らかにするためにoutlineプロパティーを指定してみたところ、親の幅がおかしなことになっているようだ。親の幅と画像の幅が相互に関係し合うような形になっているため、%単位でpaddingプロパティーを指定するとサイズが決まりきれないような挙動に見える。
デモ・ページに書いておいたけどChrome 37ではずれだけは直っている(のでIssueとか検索してない)。Opera 23でも同じ。アウトラインのずれは直っていない。こちらはInternet Explorer 12でも直っていない。
なお、画像の直接の親にoutlineプロパティーを指定すると何故か直る。これは対策にはならないので、この組み合わせはNGと覚えておいた方が良さそう。マークアップを変更して良いのなら画像置換を使うのが良いと思われる。