【JavaScript】safariでチェックボックスが反映されない

【JavaScript】safariでチェックボックスが反映されない

複数のブラウザに対応する画面を作成していました。

しかし、Safariだけチェックボックスがチェックできません。

正確には、チェックはされているのにチェックが表示されていませんでした。

画面をスクロールするとチェック状態が表示されました。

表示を再描画すれば良いと考えて調べたところ、こんなのを見つけました。
https://stackoverflow.com/questions/3485365/how-can-i-force-webkit-to-redraw-repaint-to-propagate-style-changes

上で議論されている解決策のうち、div要素を使ったものを採用しました。

こんなJavaScriptです。

// safariでチェックボックスのレ点が反映されない現象の解決策
// チェックボックスチェック時の処理を設定する
function setCheckboxAction(){

    var elementList;

    // チェックボックスをすべて取得する
    elementList = document.querySelectorAll('input[type="checkbox"].checkbox');
    // clickイベントを追加する
    for(var i = 0; i < elementList.length; i++){

        element = elementList[i];

        // クリック時処理（何もしない）を追加する
        element.addEventListener("change", function(event){

            drawCheckbox(event);
        });
    }
}

// チェックボックスを再描画する
function drawCheckbox(event){

    var body;
    var div;
    var removeList;

    // 親要素を取得する
    body = document.querySelector('body');

    // 再描画発生用の要素を取得する
    div = document.querySelector('.js-draw');
    // 既に存在する場合は削除する
    if(div != null){

        div.remove();

    // 存在しない場合、作成する
    }else{

        // 追加用の要素を作成する
        div = document.createElement('div');
        // 専用のクラスを設定する
        div.classList.add('js-draw');
        // 要素を追加する
        body.appendChild(div);
    }
}

チェックボックスの値が変更された際に、画面表示にほぼ影響しないdiv要素を追加しています。

既に存在する場合は削除しています。

setCheckboxActionを画面表示の際に呼び出すことで、すべてのチェックボックスにイベントリスナが登録されます。

一応、Safariでもチェックボックスが正常に表示されることが確認できました。

今のところはちゃんと動いているように見えます。

 

それにしても、海外の方々は頭が良いですね。

ちゃんと英語を読めるようになるとかなり楽になるはずなのですが、なかなか難しいですね。