追記(2020-05-25)
Chrome 83.0.4103.61 だともう起きません。
概要
Chrome で documentFragment をつかいつつ appendChild すると存在してるはずの要素が表示されないことがある。
条件
調べた限りだと、以下の全てを満たしてると起きる。
- Chrome 81.0.4044.122
- 他のバージョンは調べてない
- 子要素が隠れる可能性のある要素
-
<select>と<option>とか <details>とその子要素とか
-
- 一つの関数内で、親要素を空にして子要素をいったんdocumentFragmentにいれてから本物のDOMに追加する処理を行う
- DOM上にかつて存在したが今は存在していない子要素を追加する
つまり以下のいずれかの条件を満たすと起きない。
- Firefox
- 常にブラウザ上に表示される親子要素に対する操作
-
<ul>と<li>とか -
<div>とか - (要はほぼ全ての要素)
-
- documentFragment を使わない
-
document.createElementで新たに作成した要素を追加する - 親要素を空にする操作と子要素の追加の操作を、ちょっと時間置いて実行する
例
example.html
<select id="list">
<option class="item" value="1">1</option>
<option class="item" value="2">2</option>
<option class="item" value="3">3</option>
</select>
上のようなHTMLに対して jQuery で以下の操作を行う。
const $list = $('#list');
const $items = $('.item');
(() => {
// リストを空にする
$list.empty();
// DOM上には存在しなくなった items を再度 append する
$items.each((index, el) => $list.append(el))
})()
すると開発者ツールの Elements タブでは存在して見えるのに、ブラウザ上では表示されなくなる。 <select> 要素をクリックしても何も出てこなかったり、2, 3 だけ出てきたりして不審な挙動を起こす。
jQuery を使ってなくても以下のようにやると再現する。 jQuery append も内部で document.createDocumentFragment() をつかってるので fragment の挙動がなんかおかしいっぽい。
const list = document.querySelector('#list');
const items = document.querySelectorAll('.item');
const append = (parent, child) => {
const fragment = document.createDocumentFragment();
fragment.appendChild(child);
parent.appendChild(fragment);
}
(() => {
// リストを空にする
list.innerHTML = '';
// DOM上には存在しなくなった items を再度 append する
items.forEach( item => append(list, item) );
)();
解決策
どうやら appendChild したあとにレイアウト(リフロー)が起きてないっぽい。なのでリフローすればよい。見えなくなった要素の高さを取得したり、開発者ツールでハイライトしたりするとリフローが起きて表示される。
もしくは DOM を使い回さない。適宜 createElement などする。
// 高さを取得したり
item.offsetHeight
// jQueryならcloneしたりで要素を作り直してやるとか
$items.each((index, el) => $list.append($(el).clone()))