PC版(Macでのみ確認)Safariにおいて、リンク要素にロールオーバーした際にbodyの背景画像を設定しているんですが表示されず、下記ページの方法を試したんですがそれでも解決されませんでした。
http://16deza.com/note/background-image-pcsafari-not-displayed/
問題の起こっているサイトはこちらになります。
http://hyld.jp/
上記サイトの「PROJECTS」の各種リンクをロールオーバーするとそれぞれに対応した背景画像を表示するようにしており、Chrome、Firefoxでは動作しています(Safari含めすべて最新バージョン)。
以下に該当箇所のコードを示します。
HTML
<dl class="clearfix hyld"><dt>2016</dt><dd><h3><a href="https://www.behance.net/gallery/46836523/HYLD" target="_blank">HYLD</a></h3></dd></dl>
<dl class="clearfix arg"><dt>2014</dt><dd><h3><a href="http://www.allrightgraphics.com/" target="_blank">ALL RIGHT GRAPHICS</a></h3></dd></dl>
<dl class="clearfix ppl"><dt>2014</dt><dd><h3><a href="http://papierlabo.com/" target="_blank">PAPIER LABO.</a></h3></dd></dl>
<dl class="clearfix ikr"><dt>2014</dt><dd><h3><a href="http://www.inkaren.com/" target="_blank">Inkaren</a></h3></dd></dl>
<dl class="clearfix ft4"><dt>2015</dt><dd><h3><a href="http://factory4f.com/" target="_blank">Factory 4F</a></h3></dd></dl>
<dl class="clearfix aeta"><dt>2016</dt><dd><h3><a href="http://www.aeta.website/" target="_blank">Aeta</a></h3></dd></dl>
<dl class="clearfix ccl"><dt>2015</dt><dd><h3><a href="http://chacoli.jp/" target="_blank">CHACOLI</a></h3></dd></dl>
JavaScript(jQueryを用いaタグに対してmouseenterをトリガーに関数を呼び出しています)
var prj = $(this).parent().parent().parent().attr('class').split(' ')[1];
switch(prj)
{
case 'hyld': $('body').css({'background-image': 'url(./img/' + prj + '.png'}); break;
case 'arg': $('body').css({'background-image': 'url(./img/' + prj + '.png'}); break;
case 'ppl': $('body').css({'background-image': 'url(./img/' + prj + '.png'}); break;
case 'ikr': $('body').css({'background-image': 'url(./img/' + prj + '.png'}); break;
case 'ft4': $('body').css({'background-image': 'url(./img/' + prj + '.png'}); break;
case 'aeta': $('body').css({'background-image': 'url(./img/' + prj + '.png'}); break;
case 'ccl': $('body').css({'background-image': 'url(./img/' + prj + '.png'}); break;
default: break;
}
以上、ご教授いただけますと幸いです。
どうぞよろしくお願いいたします。