Safariで<object>を用いたSVGの表示/非表示を切り替えると<object>が再読み込みされる？

外部ファイルのSVGを<object>で読み込み、SVGの色をJavascriptで制御しています。

また、「表示/非表示」のボタンを設置し、SVGそのものの表示を制御しています。

HTML
1<div id="a">
2	<object id="canvas" data="hogehoge.svg" type="image/svg+xml"></object>
3</div>
4<button id="on">ON</button>
5<button id="off">OFF</button>
6<button id="red">RED</button>

Javascript
1$(document).on('click', '#on', function(){
2	$('#a').show();
3}
4$(document).on('click', '#off', function(){
5	$('#a').hide();
6}
7$(document).on('click', '#red', function(){
8	var svgobj = $('#canvas').contentDocument;
9	var $svg = $(svgobj).find('svg');
10	$target = $svg.find('path');
11	$target.css('fill', '#ff0000');
12}

この時
1.番号リスト色を変更する
2.非表示にする
3.再度表示する
という動作を行った時、Chrome、Firefox、Edgeでは変更した色のまま表示されるのですが、Safariでのみ、変更前の色（デフォルトの色）で表示されてしまいます。

Webインスペクタ（デベロッパーツール）を見ながら確認すると
Chromeなどの場合、「非表示→表示」の際に、<object>に何か変更が加えられることはありません。（当たり前ですが）
しかし、Safariの場合、「非表示→表示」をした時、<object>が一瞬消え、再度描画されるような挙動が見られました。

Safariでも変更した色のまま再表示される様な方法はありますでしょうか？