概要
ChromeでCSS transitionを使用していたらページのロード時にtransitionのアニメーションが起こってしまうバグに遭遇した.
Chromeのバージョンは 35.0.1916.153 mだった.
詳しい原因はわからないが以下の3つの条件を満たせば起こるようだ.
- 同じドメインにおいたjqueryを読み込んでいる(jquery-1.11.1.min.jsのみ? 他のバージョンは試していないからわからない,googleがホスティングしている物を使うと起こらない.)
- jsファイルをjqueryのほかに2つ以上読み込んでいる(1つの場合でも低確率で起こる?)
- scriptタグより後にlinkタグを用いてcssを設定している
解決策
上記の3つの条件を満たさない限り発生することはないので,
linkタグをどのスクリプトタグよりも先に書くことでこの問題は簡単に解決できる.
再現コード
以下は実際に問題が起こるコードである.
jqueryはダウンロードしてtest.htmlと同じディレクトリにおいておく.
更新を何回かするとアニメーションしてしまうのがわかる.
FireFoxなどでは起こらない為,Chromeのバグであると考えられる.
test.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>transition bug</title>
<script src="jquery-1.11.1.min.js"></script>
<script src="test.js"></script>
<script src="test2.js"></script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h2>test</h2>
</body>
</html>
test.css
h2{
text-align: center;
background: black;
color: white;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 1s;
transition-duration: 1s;
}
test.js
/* 空, このファイルはなくても良い, ただしhtmlのscriptタグは必要*/
test2.js
/* 空, このファイルはなくても良い, ただしhtmlのscriptタグは必要*/