Chrome和Safari中的CSS列数和位置绝对值（z-index？）

Question

请考虑以下示例：https://codepen.io/anon/pen/OOrMLm

可以点击每个白色块，这会显示一个小红色弹出窗口，我需要用户做出一些选择。

在Firefox上，一切似乎都运行正常（如果我在白色元素上使用display:inline-block;），但在Chrome和Safari上，行为有点奇怪。

这两个错误如下：

• 在position:absolute中显示位于右侧的红色弹出窗口似乎会影响列中的流量（蓝色块扩展），而在Firefox中则不会（这是我想要的）< / LI>
• 点击重叠到第二个蓝色div上的红色弹出窗口不会被弹出窗口内的点击捕获（看起来弹出窗口是＃34;低于＆＃34;第二个蓝色div不知何故）。

我强迫z-index和transform: translateZ()玩弄但没有运气。好像display: flow-root;对Chrome有点帮助，但我无法让它完全运行。

有关如何在Chrome和Safari中解决此问题的想法吗？