CSSのcontentで埋め込んだ画像について、FirefoxとSafar

PowerPoint資料を画像化して、HTMLとしてスライドショー的に閲覧出来るツール
kaakaa/PPTGallery
で、スライドショーにRabbit的な
機能をつけようとしてるんだけど、どうも上手くいかない。

FireFoxではウサギとカメが表示されるけど、その他のChrome/Safari/IE軒並みダメ。

ウサギとカメに関わる部分のコードは下記。

...
    <div id='track'>
      <div>
        <img id='rabbit' style='display:none' alt='rabbit'>
      </div>
      <div>
        <img id='turtle' style='display:none' alt='turtle'>
      </div>
    </div>
...

#track{
  z-index: 50;
}
#rabbit, #turtle{
  position: fixed;
  top: 93%;
  left: 2%;
}
#rabbit::after{
  content: url("./rabbit.svg");
}
#turtle::after{
  content: url("./turtle.svg");
}

ウサギとカメをスタートさせるボタンを押すと、jsで走りだすように処理してるんだけど、Safari等では領域は確保されているものの画像が表示されない。

FireFox(見難いけど左下の方にいます)

Safari

（altで指定したテキストが走る特異な光景）

ちょろちょろ調べてみると、どうやらコレで上手く行くのはFireFoxのバグらしい。
css - :after pseudo-element working in FF, but not Safari or Chrome - Stack Overflow

インライン要素であるimgタグに::afterで要素を加えると、インライン要素imgの中にブロック要素のdivが入ってなんやらかんやら。

というわけで、#rabbit/#turtleから::afterを取り除いてみる。

#track{
  z-index: 50;
}
#rabbit, #turtle{
  position: fixed;
  top: 93%;
  left: 2%;
}
#rabbit{
  content: url("./rabbit.svg");
}
#turtle{
  content: url("./turtle.svg");
}

すると今度はSafariは表示されるけど、FireFoxが表示されない。

FireFox

Safari

これはFireFoxがimgタグについてCSSのcontentを許容していないという仕様だからっぽい。
html - content url is not working in Firefox - Stack Overflow

解決方法は::before/::afterをつけろと…スタートに逆戻り。

結局は::before/::afterつけても付ける対象がブロック要素なら問題なさそうなので、imgタグをやめてdivタグに変更したらFireFoxでもSafariでも動くようになりました。

...
    <div id='track'>
      <div id='rabbit' style='display:none' alt='rabbit'>
      <div id='turtle' style='display:none' alt='turtle'>
    </div>
...

#track{
  z-index: 50;
}
#rabbit, #turtle{
  position: fixed;
  top: 93%;
  left: 2%;
}
#rabbit::after{
  content: url("./rabbit.svg");
}
#turtle::after{
  content: url("./turtle.svg");
}

明日確認してみるけどIEは他の問題で表示されなさそうだなぁ…。