WebKit系ブラウザでforeignObject下に構築したMathJaxのsvgが表示されない

概要

多分こういうのが動かない.(特に条件を詳しく調べたわけではない)

<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG"></script>
<svg>
  <g transform="translate(100, 0)">
    <foreignObject width="300" height="300">
      $$e^{i\theta} = \cos\theta + i\sin\theta$$
    </foreignObject>
  </g>
</svg>

原因はレンダラがforeignObjectの上にある要素に指定されたtransformを全部無視してしまうからぽい. WebKit系エンジン特有のバグ.単にtranslateが無視されるだけならいいが, 最初何も表示されないのにCtrl+Tabとかでタブを移動して戻ってくると(0,0)に表示されてたりしてかなり混乱させられた.

解決策

.MathJax_SVG_Display {
       position: static !important;
}

まとめ

やっぱinline svgはつらい.

参考

• https://github.com/mathjax/MathJax/issues/279
• https://bugs.webkit.org/show_bug.cgi?id=93358