当 svg 具有 position:absolute 时，Firefox 出现弹出问题

Question

我有一个弹出窗口，可以在 Safari、Chrome 和 IE 中完美运行，但在 Firefox 中无法运行（它没有出现）。

我创建了一个 jsfiddle 来说明这个问题： https://jsfiddle.net/sregorcinimod/7x4vuwLr/8/

当您单击蓝色矩形时，应该会出现一个弹出框。

问题是我在 svg

上有一个 position:absolute

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

如果我删除该行，弹出窗口就会出现，但我需要它来做其他事情。

约束是：

1. 我需要在 svg 上设置 position:absolute，因为 jsfiddle 中没有的其他更复杂的东西，即多层 svg 的响应式定位。
2. 我需要触发器成为焦点而不是单击，因为我需要在用户单击标题中的 x 或浏览器中的任意位置时关闭弹出窗口 window。

我尝试过的事情：

1. 将 svg 包装在 div.
中
2. 更换容器。

Answer 1

将 tabindex 属性添加到 rect 例如tabindex="0"