Исчезающий гамбургер меню из адресной строки на мобильном Safari ⇐ Javascript

[Anonymous]

У меня есть веб-страница, на которой я разрешаю пользователям загружать изображения, нажав кнопку. Я использую ванильный JavaScript следующим образом:

Код: Выделить всё

async function downloadFile(url) {
const response = await fetch(url);
const blob = await response.blob();
const blobUrl = URL.createObjectURL(blob);

const link = document.createElement('a');
link.href = blobUrl;
link.download = 'image.jpg';
document.body.appendChild(link);
link.click();
setTimeout(() => {
URL.revokeObjectURL(blobUrl);
link.remove();
}, 100);
}

document.getElementById('downloadBtn')
.addEventListener('click', () => downloadFile('https://picsum.photos/200/300'));

В мобильном Safari, когда я нажимаю кнопку загрузки, изображение загружается правильно, но значок «меню» (гамбургер) в левой части адресной строки исчезает:


Возможная причина:
Похоже, что значок может активировать режим чтения Safari, который скрывает навигационные ссылки и другие элементы пользовательского интерфейса. В своем коде я динамически создаю ссылку, добавляю ее в DOM, имитирую щелчок, а затем удаляю ссылку. Я предполагаю, что это изменение DOM мешает работе режима Reader, вызывая исчезновение значка меню.
Вопрос:
Как я могу запустить загрузку файла в мобильном Safari, не вызывая исчезновения значка меню?
Что я пробовал:
Я создал кнопку, которая загружает изображение с помощью стандартного JavaScript. Я получаю изображение как большой двоичный объект, создаю временный элемент с атрибутом загрузки, добавляю его в DOM, имитирую щелчок по нему, а затем удаляю его.
На других сайтах, насколько я вижу, это работает, не исчезая, это «меню»

Подробнее здесь: https://stackoverflow.com/questions/797 ... ari-mobile