iOS11のSafariでSVGが崩れてしまう原因 - Qiita

はじめに つい先日iOS11がリリースされ、世の中のweb屋さんはデバッグに勤しんでいると思います。 そんな中、iOS11のsafariのみでSVGが崩れるの発見したので解決方法を書いていきます バグの内容 SVGアイコンをtransformを利用しアニメーションさせたりしているのですが、そのアニメーションがおかしい。 どうおかしいかというと、位置がずれたりする。 わけがわからない。 位置がずれるということは、何か座標計算がおかしいのかと疑いひたすらデバッグしてたら発見しました。 バグの原因 原因はtransform-boxの初期値が、iOS11のSafariはview-boxが指定されているため。 https://developer.mozilla.org/ja/docs/Web/CSS/transform-box MDNを見るとview-boxの説明はこう書かれている。 参照ボックスと