マウスホバーでサムネイル画像の端がIEだけ1pxズレる時の解決策・css参考

IEでマウスホバーした画像の端が1pxズレる時の対処法

誤りのソースコード

まず、自分が失敗したパターンのソースを書きます。

HTMLのソースコードが「aタグ＞divタグ class="waku"＞imgタグ」という構造で作った時に、

a .waku{
  position: relative;
  width: 100%;
  padding-top: 66.67%;
  overflow: hidden;
  background: #000;
}

a .waku img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
}

a:hover .waku img{
  opacity: 0.8;
  -moz-transform: scale(1.1,1.1);
  -webkit-transform: scale(1.1,1.1);
  -o-transform: scale(1.1,1.1);
  -ms-transform: scale(1.1,1.1);
}

こんな書き方だとボツでした。

divに背景色を与えて、その上にあるimgを透過して、シャドウ感を与える感じの案だと、IEはどうもダメなようです。

そこで対処法を検討してみたところ、どうやら疑似要素に頼るほうが良いそうです。

疑似要素を使ったソースコード

こちらだと、IEでもシャドウ感がうまく出ました。

a .waku{
  position: relative;
  width: 100%;
  padding-top: 66.67%;
  overflow: hidden;
}

a .waku::after{
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  transition: 0.3s;
}

a:hover .waku::after{
  opacity: 0.25;
}

a .waku img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
}

a:hover .waku img{
  -moz-transform: scale(1.1,1.1);
  -webkit-transform: scale(1.1,1.1);
  -o-transform: scale(1.1,1.1);
  -ms-transform: scale(1.1,1.1);
}

divをrelativeにして、疑似要素afterをabsoluteで全面に覆って、そこに全透過にした背景色を設定しておいて、ホバーした時に、div::after側で透過具合を薄めてあげて、シャドウ感を出す、という流れです。

ただし、シャドウの1pxずれは消えるんですが、css設計次第だと、今度はscale側で1pxずれのエラーが起きます。

IEではflex使用時のmax-widthに気をつける

先ほど、aタグで囲っていた要素が複数あったとして、それをflexでwidth:●●%;と指定していた場合、transitionとscaleでアニメーション効果を与えると、再計算などの関係で、画像の拡縮時に1px程度のガタツキやずれが生じる時があります。

この時のヒントとして、width:33%;と指定していて、それをmax-width:●●px;と、%よりも低い数字を用いて抑制するような書き方をすると、どうもIEの計算方法と相性が悪いみたいで、ガタツキが起きます。

なので、IEだけCSSハックなどかけてあげて、%を調整するか、max-widthに余裕を持たせてあげると解決の参考になるかもしれません。（自分の場合はこれで解決でした。）

まとめ

マウスホバーで1pxずれで困った時、まだ疑似要素のposition:absolute;で覆う方針を試していなければ、ぜひ試してみてください。

とりあえず困った時は、対象のソースだけ抜き出してみて、じっくり検討してみることが大事です！

あと、申し訳ないです。本記事、自分の備忘録用の書き方なので、わかりづらいかもです・・・。