在Safari中离开页面时显示叠加层

Question

我希望在用户点击链接后，但在加载下一页之前，在页面上显示一个叠加层。当单击链接时，我当前的代码会向body元素添加一个类，它会显示叠加层。

        $('a').on('click', function(e) {
            $('body').addClass('loading');
        });

相关的CSS是：

body.loading:after {
  content: "";
  position: fixed;
  top: -500%;
  left: -500%;
  right: -500%;
  bottom: -500%;
  z-index: 9999;
  pointer-events: all;
  background-color: rgba(255,255,255,0.6);
}

这会在Firefox和Chrome上产生预期的结果，但不会在Safari上产生。

使用WebInspector，我可以看到以下行为：

• 在Firefox和Chrome中，loading类已添加到body标记，并显示重叠。它会继续显示，直到下一页加载
• 在所有浏览器中，手动将loading类添加到body标记会导致叠加显示
• 在Safari中，如果我停止传播click事件，则会显示叠加层。
• 在Safari中，通过WebInspector观察，点击链接时loading类 未添加到body标记。

如何在Safari中显示将在等待下一页加载时显示的叠加层？