Untitled

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Download large Blob Firefox issue on macOS</title>
	</head>
	<body>
		<h1>Download large Blob Firefox issue on macOS</h1>
		<h2>About</h2>
		<p>Attempting to download a blob URL on macOS over a certain size will hang at "A few seconds left" without ever finishing the download.</p>
		<p>However, if a <code>download</code> attribute is set on the link, like <code>download="file.zip"</code> (an empty download attribute doesn't work), it will complete, although it may have a short pause on "A few seconds left".</p>
		<p>Opening a tab to the blob URL or setting <code>window.location</code> to the blob URL also results in a hung download.</p>
		<h2>Examples</h2>
		<p>Click the following links for example downloads to demonstrate the problem (note the generated ZIP file is just a dummy file).</p>
		<ul>
			<li><a class="dl">No download attr</a> (Hangs)</li>
			<li><a class="dl" download>With download attr</a> (Hangs)</li>
			<li><a class="dl" download="file.zip">With download attr set</a> (Completes)</li>
			<li><a class="dl-location" href="#">window.location</a> (Hangs)</li>
		</ul>
		<script>
(function() {
'use strict';

var parts = [
	new Uint8Array(0xFFFFFFF),
	new Uint8Array(0xFFFFFFF),
	new Uint8Array(0xFFFFFFF),
	new Uint8Array(0xFFFFFFF)
];
var blob = new Blob(parts, {type: 'application/zip'});
var url = URL.createObjectURL(blob);

Array.prototype.forEach.call(document.querySelectorAll('.dl'), function(el) {
	el.href = url;
});
Array.prototype.forEach.call(document.querySelectorAll('.dl-location'), function(el) {
	el.addEventListener('click', function(e) {
		e.preventDefault();
		window.location = url;
	});
});

})();
		</script>
	</body>
</html>