最近、会社の新しいhtmlアプリケーションにカスタムSVGアイコンコントロールを実装しました。実装されて間もなく、アプリケーションの使用時にIE 11がランダムに「クラッシュする」と弊社の品質部門が報告し始めました。
クラッシュという用語が何が起こっているのかを正確に説明しているとは思いません。アプリケーションは、要素がマウスまたはキーボードの入力を受け入れなくなり、ホバースタイルを表示するように表示が変化しない状態になります。ただし、ボタンにカーソルを合わせるとカーソル画像が適切に変化し、入力要素とスクロール可能なセクションはマウスホイールを使用してスクロールできます（ただし、マウスホイールのみ）。
アプリケーションがこの状態のときにUI応答プロファイラーを実行したところ、クライアント側のスクリプトが実行されておらず、IEのガベージコレクターしか実行されていませんでした。1週間のテストの後、ユーザーがsvg要素で生成されたアイコンをクリックしたときに、そのクリックがDOMからクリックされたsvg要素を削除する関数を起動したときにのみ、状態がトリガーされることを最終的に決定しました。
問題の説明/再現に役立つコードペンは次のとおりです：http : //codepen.io/GooeyIdeas/pen/WvpPzP
そしてレクリエーションのための最小コード：
// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI
function AppViewModel() {
var self = this;
this.isLocked = ko.observable(false);
this.toggleLock = function(){
self.isLocked(!self.isLocked.peek())
}
}
ko.applyBindings(new AppViewModel());svg use{
cursor: crosshair;
}
svg{
border: 1px solid #eeeeee;
cursor: default;
}
svg:hover{
border-color: #dedede;
background: #cecece;
}
#svg-icons{
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>The cursor will change into a crosshair if you are hovering over the correct element.</div>
<div>
<!-- ko if: isLocked -->
<svg class="ux-icon-svg" width="24" height="24"><use data-bind="click: toggleLock" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#locked"></use></svg>
<!-- /ko -->
<!-- ko ifnot: isLocked -->
<svg class="ux-icon-svg" width="24" height="24"><use data-bind="click: toggleLock" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#unlocked"></use></svg>
<!--/ko-->
</div>
<svg xmlns="http://www.w3.org/2000/svg" id="svg-icons">
<symbol viewBox="0 0 24 24" id="unlocked">
<path d="M18,9h-1V7c0-2.8-2.2-5-5-5S7,4.2,7,7h1.9c0-1.7,1.4-3.1,3.1-3.1s3.1,1.4,3.1,3.1v2H6c-1.1,0-2,0.9-2,2v9c0,1.1,0.9,2,2,2
h12c1.1,0,2-0.9,2-2v-9C20,9.9,19.1,9,18,9z"></path>
</symbol>
<symbol viewBox="0 0 24 24" id="locked">
<path d="M18,9h-1V7c0-2.8-2.2-5-5-5S7,4.2,7,7v2H6c-1.1,0-2,0.9-2,2v9c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2v-9C20,9.9,19.1,9,18,9z
M15.1,9H8.9V7c0-1.7,1.4-3.1,3.1-3.1s3.1,1.4,3.1,3.1V9z"></path>
</symbol>
</svg>誰かが以前にこれに遭遇したことがありますか？SVGの「use」要素を引き続き使用できる回避策を知っている人はいますか？何かを明確にする必要がありますか？
*編集このエラーを再現できない人もいるようです。他の誰かがこのエラーを再現できるかどうか知りたいのですが、再現できない場合は、どのバージョンのウィンドウを実行していますか？
**編集このバグはWindows 8 PCには存在しないようです。svg use要素にカーソルを合わせるとカーソルが十字線に変わるCSSをサンプルに確実に追加しました。これは、クラッシュをトリガーするためにクリックする必要がある要素だからです。
この投稿ではトラフィックが少ないため、解決策を投稿すると思います。このCSSルールを追加しました。
svg use {
pointer-events: none;
}
これは理想的ではありませんが、IE 11がロックアップするのを防ぎます。これが、このプロジェクトでサポートするために必要なことのすべてです。ただし、この投稿が今後このバグに遭遇し、IEの古いバージョンをサポートする必要がある可能性のある他のユーザーを支援したいと思います。誰かが時間をかけてより堅牢なソリューションを考え出してくれるなら、私はそれをこの投稿への答えとして受け入れます。
また、この問題についてマイクロソフトにバグレポートを提出する必要がありますか？
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加