firefoxでsvgとwow.jsを組み合わせたら表示されないエラー

firefoxsvgとwow.jsを組み合わせると
勝手にelement.styleにvisibility: hidden;が追加されて表示されないエラーが発生

回避するためにwow.jsの中身を見てみると
しっかりelement.styleに visibility: hidden; を指定していた


wow.jsは

「スクロール値が.wowを指定した位置に来るまではelement.styleでvisibility: hiddenを指定」
  ↓
「スクロール値と指定値まで来たらvisibility: hiddenをvisibleに変更する」
(その後animateを開始)

っていう流れ

svg以外にもh2とかpとかいろんなところにwow.jsを使ってるけどそんなエラーはなく、
どうしてもsvgにだけエラーが出る

しかもfirefoxにだけ現れる謎のエラー…

なぜ判定がされていないのかよく理解できなかったけど
visibilityをopacityに変えてやってみたりしたが結果は同じ

svgに直接指定するのがダメなのか!ということでspanに入れてみたが無理だった

objectに入れてみたらしっかり判定してくれた…!!

よくわからないけどsvgにwow.jsを使用したいときはobjectに入れて
objectに.wowを指定すれば良いらしい

以下実際に使用しているコード(Haml)

-arrow = "M22.7,22.6L41.9,3.4C43.2,2.1,42.3,0,40.5,0H2C0.2,0-0.7,2.1,0.6,3.4l19.3,19.3C20.6,23.4,21.9,23.4,22.7,22.6z"
-green = "#93D87C"
%object.wow.zoomIn.animated{"data-wow-delay" => "1s"} 
  %svg
    %path{:fill => green, :d => arrow}

(ちなみにhaml時に「"data-wow-delay"」を指定する方法がわからなかったので
いろいろ模索するのにかかった時間が1時間…
この時間が無駄なのでもっと削減していきたい)