ChromeのSVGがレンダリングされないことがある

第3の編集：機能するテストケースを次に示します。svgスプライトシートのキャッシュと関係があるようです。SVGのキャッシュがないようにサーバーでキャッシュ制御を構成すると、動作が発生します。自由にソースを表示してください（すべて1つのファイルに含まれていますが、ここにはすべて含めたくありません）。

https://stuff.spherical.fish/svgtest.html

2番目の編集：以下にリストされている修正（外部スプライトシートを使用する代わりにindex.htmlに要素を直接挿入する）は、Chrome v49（ベータチャネルブラウザーが更新したばかり）で機能しなくなりました。v48には断続的なレンダリングの問題がありますが、v49 はパターンに従って参照されるものをほぼ一貫してレンダリングしません<svg><use></use></svg>。しかし、大きくて複雑な角のあるページでのみです。退屈な単純なテストケースはうまく機能します。既知の問題またはこれが原因である可能性のある場所に直接私を向けることができる人のための報奨金を追加しました。それは断続的なバグであり、FirefoxとSafariでページ全体が正常にレンダリングされるため、ファイルが見つからないことはほとんどありません。

編集：これは間違いなく外部リソースへの参照と関係があります。SVGを直接index.htmlに埋め込み、それらを参照すると<use xlink:href="#id"></use>正常に機能しますが、<use>要素で外部ファイルを参照すると、時々しか読み込まれません。

私はChromeで奇妙な動作をしています（唯一-これはオペラ、Firefox、Safariでは起こりません）; 私はそれを少なくとも40代前半からバージョンごとに見てきました。

私の行動は、ng繰り返しの角構造の真ん中にあります。すべてが同じです-一緒にフレックスボックス化されたdivの束があります。次のようなSVG要素もあります。

<svg class="icon-3">
  <use xlink:href="/assets/trellis-icons.svg#icon-users"></use>
</svg>

かなり簡単です。

問題は、これらの繰り返し要素の一部では、アイコンがレンダリングされないことです。クロム開発ツールで要素を調べると、レンダリングされたSVGの<use>要素には高さと幅があるのに対し、レンダリングされていない要素には高さと幅がありません。

ここに実際の違いがあるわけではありません。DOMを手動で編集して、問題のあるエントリの1つがレンダリングされたエントリの1つと完全に一致するようにしましたが、svgはまだレンダリングされません。ここに関連するスクリーンショットがあります。

以下を見ることができます（ボタンのパディングの問題は無視してください）。最初の行には小さな頭と吹き出しアイコンがありません。これは断続的な問題です。ページをリロードすると、問題ないか、アイコンがまったく読み込まれない可能性があります。

私は疑問に思っています：非同期で何かをロードするスプライトシート（この動作を示すすべてのSVGが同じ大きなSVGファイルにあり、＃idによって参照される）に関連するある種のあいまいな問題はありますか？

これが本当に未知/新しい動作である場合、私はテストケースのエンジニアリングに取り組みますが、ある種の同時実行バグに依存する何かを構築することは、少し難しいです。だから私は最初に周りを尋ねると思いました。

追加する編集：個々のsvgをスタンドアロンとしてエクスポートして、ある<img src="icon.svg">方法で使用する場合、この動作は起こりません。単一のスタンドアロンファイルのアイコンでsvgを使用しても失敗します。

編集：@kaiidoのリクエストに従って、問題の関連するsvgを以下に示します。

<svg xmlns="http://www.w3.org/2000/svg">
  <!-- thirty other symbols snipped -->
  <symbol id="icon-users" viewBox="0 0 512 512">
    <path d="m352 397c-15-16-78-32-109-48c-21-11-32-33-32-53c0-10 7-19 13-26c5-6 9-14 13-24c8-4 18-12 18-31c0-12-2-19-5-24c1-11 2-22 3-34c4-45-42-90-89-90c-47 0-92 45-88 90c1 12 2 23 3 34c-4 5-5 12-5 24c0 19 9 27 18 31c4 10 8 18 13 24c6 7 13 16 13 26c0 20-11 42-32 53c-18 9-48 19-72 28l0 68l354 0c0 0 0-32-16-48z m146-7c-21-8-46-16-62-24c-17-8-25-27-25-43c0-8 5-15 10-21c4-5 8-12 11-20c7-3 15-10 15-25c0-10-2-16-5-20c1-9 2-18 3-27c3-37-34-76-73-76c-38 0-75 39-72 76c1 9 2 18 3 27c-3 4-5 10-5 20c0 16 8 22 15 25c3 8 7 15 11 20c4 6 10 13 10 21c0 10-4 22-11 31c30 11 43 22 53 33c19 19 19 58 19 58l103 0z"/>
  </symbol>
</svg>