「0」につける単位の有無で変わること

マウスオーバー時にアニメーションするリンクが、 iPhone ( iOS8 ) Safari で上手く動かないという問題に遭遇。

デモは携帯の iOS8 Safari で確認した（して）。

• Demo | JSFiddle

.link {
  &::after {
    width: 0; // <-
    transition: width 0.5s ease;
  }
  &:hover::after {
    width: 100%;
  }
}

このようにしていた場合、iOS8 Safari で挙動を確認すると、リンクをタップしてもアニメーションだけが発生して遷移先には飛ばず、二度目のタップでようやく遷移する。PC や Android 4.0 端末のブラウザでは一度のタップで問題なく遷移する。

解決

• Demo | JSFiddle

.link {
  &::after {
    width: 0%; // <-
    transition: width 0.5s ease;
  }
  &:hover::after {
    width: 100%;
  }
}

単位を揃えて付けるだけ。リンクをマウスオーバーしたときの width の単位をパーセントで指定しているが、マウスオーバー前の width にも同じ単位を付けておくことでこの問題は回避できる。

追記

あんまりなタイトルをそこそこなタイトルに変更。

「良いのが思いつかないんだが、まだマシであろう！」という気持ち。

---

僕は「 0 」に単位をつけないコーディングスタイルなので、どうしようか、えらく面倒くさいと思っている。