Downloading a javascript generated .VCF file blob on Firefox iOS doesnt understand type?

[fdverwoerd]

Steps to reproduce

I have this vcard information in html pre tag.

<!-- Place your vCard data inside a <pre> tag -->
<pre id="vcard-data">
BEGIN:VCARD
VERSION:3.0
FN:John Doe
ORG:Example Inc.
TEL:+123456789
EMAIL:john.doe@example.com
END:VCARD
</pre>

<!-- Button to trigger the download -->
<button onclick="downloadVCF()">Download VCF</button>

<script>
function downloadVCF() {
    // Get the vCard data from the <pre> tag
    var vcardData = document.getElementById('vcard-data').innerText;

    // Create a Blob containing the vCard data
    var blob = new Blob([vcardData], { type: 'text/vcard' });

    // Create a link element
    var link = document.createElement('a');

    // Set the href attribute to the Blob URL
    link.href = window.URL.createObjectURL(blob);

    // Set the download attribute with a desired filename
    link.download = 'contact.vcf';

    // Programmatically trigger the download
    document.body.appendChild(link);
    link.click();

    // Cleanup
    document.body.removeChild(link);
}
</script>

I use javascript to create a 'download' linke. See codepen example.

https://codepen.io/Wonky/pen/abxwpoo

On Safari en Chrome this is properly downloaded and 'used' to add new contact. But on Firefox ios it says unknown file format? What is going on?

Expected behavior

Download the VCF generated file and active 'contacts'.

Actual behavior

Unknown file download..

Device & build information

• Device: iPhone 14, ios 17.3.1

Notes

Attachments:

Screenshot when download prompt is shown in firefox ios.

┆Issue is synchronized with this Jira Task

[upscale-duc]

I got the same issue

[solomon-from]

i get the same issue. i am using the same codepen, i made some mods but still the same. https://codepen.io/Wonky/pen/abxwpoo

this is mobile firefox: