fadeInする際にdisplay; blockがdisplay; noneになる現象がたまに発生

jQuery1.11.1環境で発生を確認

jQueryでバグのようなたまにしか発生しない問題に直面していた。

fadeInする際に、displayがnoneになってしまう現象で、setInterval内でfadeInしていたため、この問題が生じた際にはdisplay; noneになる関係上、画面がずれたり戻ったりするために見ずらい状況がごくたまに発生していた。

Webで何度か検索して最もマッチする情報が以下のURL

FadeIn doesn’t keep block format

この情報によると、divタグではfadeInの問題は発生しないと書いてあって、今回問題が発生したコードでは、preタグ内でfadeInするようにしていた。実際のpreタグは以下の通り

<pre id="news"></pre>

このpreタグ内に以下のコードでaタグを追加する際に問題が生じることがあった。

$('#news').html('<a href="http://engineer.local">engineer.local</a>').hide().fadeIn(2000);

setIntervalで繰り返しfadeInするため、直前でhideして前のアンカーを消してからfadeInするようにしてあるが、このコードで冒頭書いた問題がごくまれに生じていた。

上で載せたjQuery Bug Trackerのコメントの通り修正したのが下のコード。

$('#news').html('<a href="http://engineer.local">engineer.local</a>').hide().fadeIn(2000).css('display', 'block');

上のコードで様子を見て、発生することがあるようであれば、preタグをdivタグに変更することにした。