Download Blob file ignores download attribute

Question

I implemented a download via blob object and when the content is bigger than 10239 characters, the download attribute is ignored and I get filenames like ' 2b56fc37-9b0e-4f4c-b3f3-a28113605ea5.txt '. Can somebody tell my why?

Fiddle: https://jsfiddle.net/h74wca11/4/

First button creates a file with 10239 'X' and the second one a file with 10240 'X'. First button generates a file named ' test.txt ' while the second filename is arandom name like ' 8cd3dc83-b3fe-4e58-99b0-39a876107a2d.txt '

I'm using following code:

function myFunction(count) {
    content = '';
    for (var i = 0; i < count; i++) {
        content += 'X';
    }
    var file = new Blob([content], {
        type: 'text/plain'
    });

    var fileURL = URL.createObjectURL(file);
    var a = document.createElement('a');
    a.href = fileURL;
    a.target = '_blank';
    a.download = 'test.txt';
    document.body.appendChild(a);
    a.click();
}

I'm running Chrome 54.0.2840.71 m (64-bit) on Windows 10

EDIT
I just tried my fiddle in incognito modus - and it works. WTF

Answer 1

I can't comment (due my low reputation) so I will bet for a correct answer. Try this after click():

a.click();
setTimeout(function(){
    document.body.removeChild(a);
    window.URL.revokeObjectURL(fileURL);  
}, 100);

Your code works ok for me too, but sometimes you need a delay in order to work ok with blobs. I always use this and every problem (almost) with blobs goes away. https://jsfiddle.net/h74wca11/6/