display:none;の要素のCSSを動的に変更した時、Chromeだけ適用されない

Question

親要素をdisplay:none;にしたsvgの色をjQueryで動的に切り替えています。
この要素をjQueryで表示したり、非表示にしたり切り替えを行っています。

<!--SVG-->
<div class="parent" style="display:none;">
<object id="canvas" class="productpic"  style="display:none;" data="hoge.svg" type="image/svg+xml"></object>
</div>
<!--色選択ボタン-->
<div class="colorbtn" data-color="0">RED</div>
<div class="colorbtn" data-color="1">BLUE</div>
<div class="colorbtn" data-color="2">YELLOW</div>
<!--表示切替ボタン-->
<div id="on">表示</div>
<div id="off">非表示</div>

var colordata = new Object();
colordata[0] = 'rgba(255,0,0,255)';
colordata[1] = 'rgba(0,0,255,255)';
colordata[2] = 'rgba(255,255,0,255)';
$(function(){
	$(document).on('click', '#on', function(){
		$('.parent').fadeIn(400);
	});
	$(document).on('click', '#off', function(){
		$('.parent').fadeOut(400);
	});
	$(document).on('click', '.colorbtn', function(){
		var colorid = $(this).data('color');
		var svgobj = document.getElementById('canvas').contentDocument;
		var $svg = $(svgobj).find('svg');
		$target = $svg.find('path');
		$target.css('fill', colordata[colorid]);
});

非表示の状態で色を切り替え、その後この要素を表示した時、ブラウザによって挙動が異なり困っています。

Firefox、Edgeでは上記操作を行った時、色が切り替わった状態で表示されます。（意図通りの挙動）
一方、Chromeでは上記操作を行った時、色が切り替わっていない状態で表示されます。

ただし、Chromeの場合でも一度表示を行った後、再度非表示にしてから色の切り替えを行った場合には、改めて表示した際、色が切り替わった状態で表示されます。（意図通りの挙動）

原因が全くわからず、どなたかお分かりになる方がいらっしゃいましたら、教えて頂けると大変助かります。

＜追記＞
どうやら、最初、非表示の際はdocument.getElementById('canvas').contentDocumentがnullとなってしまい、一度表示下後に非表示にした際は、しっかりと#documentが取得出来ている様です。
ちなみに、最初の非表示の際でもdocument.getElementById('canvas')は正しく取得出来ているので、.contentDocumentの挙動でブラウザによって違いがあるということでしょうか。。。

Comments

[azuapricot]

そのjqueryはどこに？

[TakuHosoya]

すみません、追記しました。

Answer 1

<object id="canvas" class="productpic"  style="display:none;" data="hoge.svg" type="image/svg+xml"></object>

上記objectのdocumentを読み込むタイミングがブラウザによって異なる様です。

Firefoxなどはページ読み込み時点で全てのdocumentを読み込み、対してChromeでは実際に表示されるタイミング（通常であればページ読み込み時、display:none;を設定している場合はdisplay:none;で無くなった時）にdocumentが読み込まれる様でした。

そこで、対処療法的かもしれませんが、直接HTMLタグにdisplay:none;を書かず、以下の様に制御することで、ページ読み込み時に確実にdocumentを読み込ませ、その後display:none;を意図通りに設定して行くことしました。

これでChromeでも意図通りの挙動となりました。

<!--SVG-->
<div class="parent">
<object id="canvas" class="productpic" data="hoge.svg" type="image/svg+xml"></object>
</div>
<!--色選択ボタン-->
<div class="colorbtn" data-color="0">RED</div>
<div class="colorbtn" data-color="1">BLUE</div>
<div class="colorbtn" data-color="2">YELLOW</div>
<!--表示切替ボタン-->
<div id="on">表示</div>
<div id="off">非表示</div>

$(window).on('load', function(){
	var svg = document.getElementById('canvas').contentDocument;
	if(svg){
		$('.parent').hide();
		$('.productpic').hide();
	}
});

Comments

[s8_chu]

CSSで行いたいならば、固定位置指定にしたうえで画面外へ飛ばしても良いと思います。
<object id="canvas" class="productpic" style="position: fixed; top: -10000px;" data="hoge.svg" type="image/svg+xml"></object>

[TakuHosoya]

なるほど、非表示にする仕組み自体を変えると言うのも手ですね！