2017-02-21 11 views
0

私はHugoを使用して構築された、私のポートフォリオサイト用のフォトワイプギャラリーに取り組んでいます。コードは一番クリーンではありませんが、HarpJSを使用している私の現在のビルドから大幅にアップグレードされています。私はAWSとGCPについても多くのことを学びました。モバイルサファリのSVGが多すぎますか?

すべてはデスクトップで動作し、昨日まではすべてがモバイルで動作しました。

すべてのサムネイルでPrimitiveを実行し、2500の形状のSVGを出力しました。これはおそらく大きな過度の過労ですが、私はその詳細レベルからの視覚効果が大好きです。それは非常に絵画になります。

モバイルSafariでページが絶えずクラッシュしていますが、これは私のMac上のモバイルウェブインスペクタを愚かに閉鎖しています。そのため、どこで障害が発生しているのかわかりません。

各SVGは約150kbです。 SVGを交換してJPGを使用すると、ページサイズを大きくしてもすべて正常に動作します。私は怠惰な読み込みプラグインが動作していないという疑いがありますが、私は確信していません。 (私はベール使用しています - luis-almeida.github.io/unveilを。)

はここに私のステージングバケット上のギャラリーのページへのリンクです:すべてのヘルプ/アドバイスをいただければ幸いですstaging.iammatthias.com

答えて

0

これは間違いなくメモリの制限の問題です。 Safari mobileは、svgのレンダリングに関してメモリ制限があることで知られています。問題を説明している記事がありますが、ページに投げ込むSVGの量をすべて一度に制限することに厳密に限定されています(すべてのSVGでデスクトップサファリに苦労しているサイトもあります)。 iOSを使用する唯一の方法は、サーバからのイメージを一度にいくつか読み込むのをやめたり、このユースケースに対してSVGを使用しないように切り替えることです。追加の読書のための

カップルのリンク:

https://www.richdynamix.com/blog/svg-vs-png-in-sprites-an-ios-issue

https://discussions.apple.com/thread/7530327?start=0&tstart=0

+0

おかげで、私はこれがそうだった心配していました。私はSVGをJPGに変換することを検討します – iammatthias

+0

私は画家的な外観が好きです。あなたはちょうどsvgsを取って、イラストレーターでそれらを開いて、jpgsまたはpngsとしてそれらを再エクスポートして、見栄えを保持する - メモリオーバーヘッドなしで? – Korgrue

+1

これはオプションですが、そこにいくつあるのかによって少しでも守れません!しかし、私はプリミティブがPNG出力を持っていると思う。 – iammatthias