Why does my vCard display as *.vcf file on iOS?

Question

I want to send vCards (a.k.a. contact cards) to my customers as MMS.

Sometimes that message displays nicely in iOS iMessages: Contact name and icon with name initials. How I want the vCard to display on iOS

However, more often it displays badly: Generic icon and File Name.vcf. How the vCard actually displays on iOS

I am concerned that this uncommon file extension will look suspicious to users and they will not save the contact card in their phones thinking it may be malware. I have researched and tested but I can not figure out why it doesn't always display the nice way.

Details about my setup:

• Usually the vCard will be sent to customers:
  • from a Twilio number they do not have saved in their phone
  • but they have called before (they find the number online)
  • and they have received another text message from that number about an hour earlier.
• I use Twilio's HTTP API to programatically send an MMS where the attached media is the VCF file.
• I control the server that serves the vCards. It follows The Twilio tutorial for vCards:
  • The *.vcf file is version 2.1.
  • Http Content-Disposition header is inline; filename="Shop Name.vcf"
  • Http Content-Type header is text/vcard.
  • Http Cache-Control header is no-cache.
• The vCard is well formatted and displays well on Android.

I have tried:

• removing the .vcf extension from the Content-Disposition header filename
• Using text/x-vcard as the Content-Type header.
• Sending vCards manually between two phones. At first they appear as .vcf file but after some interaction they start being displayed the nice way. However I can not pinpoint or find any docs on what conditions need to be met.