svgの位置にポップオーバーの問題があります：絶対

Question

Safari、Chrome、IEでは正常に動作するが、Firefoxでは動作しない（表示されません）ポップオーバーがあります。あなたは青い四角形をクリックするとポップオーバーが表示されます https://jsfiddle.net/sregorcinimod/7x4vuwLr/8/

：

私はこの問題を説明するためにjsfiddleを作成しました。

問題行は、私はポジションを持っているという事実である：私はその行を削除するとポップオーバーが表示されますが、私は他のもののためにそれを必要とするで絶対SVG

#spacing svg{ 
    max-width:100%; 
    position:absolute; //this is the line that is causing issues 
    bottom:0px; 
} 

に。

制約がある：多層svgsのjsfiddleすなわち応答位置付けになっていない他のより複雑なものに起因するSVGに絶対：

1. 私はポジションを持っている必要があります。
2. ユーザーがタイトル内のxまたはブラウザウィンドウ内の任意の場所をクリックしたときに、ポップオーバーを解除する必要があるため、トリガーがフォーカスされてクリックされないようにする必要があります。

物事は私が試してみました：

1. はdiv要素でSVGを包みます。
2. コンテナを交換してください。

Answer 1

rectにtabindex属性を追加します。 tabindex = "0"