I have a web page where I allow users to download an image by clicking a button. I’m using vanilla JavaScript like this:
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'));
On mobile Safari, when I click the download button, the image downloads correctly, but the “menu” (hamburger) icon on left side in the address bar disappears:
Possible cause: It seems that the icon may trigger Safari’s Reader mode, which hides navigation links and other UI elements. In my code, I create a link dynamically, append it to the DOM, simulate a click, and then remove the link. My guess is that this DOM change interferes with Reader mode, causing the menu icon to disappear.
Question: How can I trigger a file download in mobile Safari without causing the menu icon to disappear?
What I tried: I created a button that downloads an image using vanilla JavaScript. I fetch the image as a blob, create a temporary element with a download attribute, append it to the DOM, simulate a click on it, and then remove it.
On other sites as I see it works without disappearing that "menu"
