iOS Safari 子元素上的 z-index 错误

Question

我的 AngularJS 应用程序有一个加载旋转器，它位于包含<div>附加项目和警报的旁边<div>。我想做的只是让警报出现在加载微调器上方，同时将包含内容的所有其他内容保留<div>在微调器后面。

我在这里创建了一个codepen： https: //codepen.io/anon/pen/zKzJNw

这仅在 iOS Safari 上出现错误，所有桌面浏览器和 Android 设备都会在加载旋转器顶部完美地显示警报。我已经搜索并搜索了这个问题的答案，并尝试了所有建议，例如：

• -webkit-transform: translate3d(0,0,0);
• -webkit-transform: translateZ(0px);
• transform-style: preserve-3d;

我对上述任何建议都没有成功。