Отображение наложения при выходе из страницы в 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, которое будет отображаться при ожидании загрузки следующей страницы?