2017.09.22

Edgeでマウスオーバーしたボタンのアイコンがちらつく現象の解決方法

Web制作

hoshidaです。Maromaroの案件でもHTML5とCSS3がすっかり標準化し、コーディングがずいぶんと楽になりましたが、気を抜いていると背後からクロスブラウザ対策で刺されるので油断できません。

タイトル通りEdgeでの不具合です。より正確には、transitionでボタンのホバーアクションをアニメーションにした際、::before で入れているアイコンが予期せぬ挙動をする現象です。

以下に再現してみた。Edgeでご覧いただくと、ホバー時にアイコンが一瞬黒くなります。アニメーションも効いてないように見えます。

RESULT
HTML
CSS

ボタンです

コピー


<div class="sample_btn">
  <a href="#">ボタンです</a>
</div>

コピー


.sample_btn a{
  width:250px;
  padding:10px 45px;
  color:#26262C;
  line-height:120%;
  text-align:center;
  text-decoration:none;
  border:1px solid #F39F00;
  background:#fff;
  display:inline-block;
  position:relative;
  backface-visibility: hidden;
  -webkit-transition: 0.3s ease-out;
     -moz-transition: 0.3s ease-out;
       -o-transition: 0.3s ease-out;
          transition: 0.3s ease-out;
}
.sample_btn a::before{
  content:"●";
  margin:-9px 0 0 ;
  color:#F39F00;
  font-size:18px;
  position:absolute;
  right:15px;
  top:50%;
  backface-visibility: hidden;
  -webkit-transition: 0.3s ease-out;
     -moz-transition: 0.3s ease-out;
       -o-transition: 0.3s ease-out;
          transition: 0.3s ease-out;
}
.sample_btn a:hover{
  color:#fff;
  background:#F39F00;
}
.sample_btn a:hover::before{
  color:#fff;
}

コピー

解決方法

原因はaタグに対して指定していた以下のコードです。このような省略表現を使わずに…

transition: 0.3s ease-out;

以下の様に書いてあげます。するとうまくゆきます。

transition: color 0.3s ease-out, background 0.3s ease-out;

RESULT
HTML
CSS

ボタンです

コピー


<div class="sample_btn02">
  <a href="#">ボタンです</a>
</div>

コピー


.sample_btn02 a{
  width:250px;
  padding:10px 45px;
  color:#26262C;
  line-height:120%;
  text-align:center;
  text-decoration:none;
  border:1px solid #F39F00;
  background:#fff;
  display:inline-block;
  position:relative;
  backface-visibility: hidden;
  -webkit-transition: color 0.3s ease-out, background 0.3s ease-out;
     -moz-transition: color 0.3s ease-out, background 0.3s ease-out;
       -o-transition: color 0.3s ease-out, background 0.3s ease-out;
          transition: color 0.3s ease-out, background 0.3s ease-out;
}
.sample_btn02 a::before{
  content:"●";
  margin:-9px 0 0 ;
  color:#F39F00;
  font-size:18px;
  position:absolute;
  right:15px;
  top:50%;
  backface-visibility: hidden;
  -webkit-transition: 0.3s ease-out;
     -moz-transition: 0.3s ease-out;
       -o-transition: 0.3s ease-out;
          transition: 0.3s ease-out;
}
.sample_btn02 a:hover{
  color:#fff;
  background:#F39F00;
}
.sample_btn02 a:hover::before{
  color:#fff;
}

コピー

原因

Edgeではtransitionの値表記を省略すると良くないようです。また、よーくアイコンを観察すると、ホバーした瞬間にaタグで指定している文字色に変わり、そこから:hoverで指定した色になっています。どうも疑似要素へのスタイルの継承ルールが独特なようです。なので文字とアイコンの色が同じだと、transitionを省略しても何ら問題は起きません。

なお、同じ現象ではないですが以下の記事を参考にしました。

CSSアニメーション(transition)で起こるバブリングの原因と対策

この原因を探求していたところ、疑似要素はろくなことが起きないからアイコンは極力 span や i を使いましょう、と言っている方もいました。ソースコードがごちゃつくので疑似要素派なのですが、今後はちょっと考えようと思います。

Web制作