Safari autocomplete for cc-exp not working

Question

I am trying to get autocomplete on a creditcard form to work properly in Safari, however it seems to completely ignore the autocompletion for expiration date. Whether I use cc-exp or separate cc-exp-month/cc-exp-year, neither is working. The autocomplete for cc-name and cc-number are working properly though, as are things working properly in Chrome.

I have been able to bring the issue down to a very simple example:

<form>
  <input type="text" autocomplete="cc-name" placeholder="name" />
  <input type="text" autocomplete="cc-number" placeholder="number" />
  <input type="text" autocomplete="cc-exp" placeholder="expiration" />
  <input type="text" autocomplete="cc-csc" placeholder="cvc" />
</form>

What am I missing here? I already tried the older syntax using ID's, names and x-autocompletetype. Neither with any success. Tested on Safari 7 till 10, so this issue seems to be around for a while, or I am really missing something obvious?

(note: to test the example above, make sure you are visiting this page over https, else it would not work anyway)

Answer 1

I was just looking for a solution to this and noticed that on an older form, where I don't even have the autocomplete attribute, it works. The difference between the forms is that on the older form I am using 2 drop-down fields (SELECT tags) for expiry month and year in MM and YYYY formats.

After playing with different options, I concluded that Safari wants 2 separate fields, one for MM and one for YYYY. I now have 2 text fields like this:

<input type="text" name="CCExpiryMonth" id="CCExpiryMonth" value="" placeholder="MM" autocomplete="cc-exp">
<input type="text" name="CCExpiryYear" id="CCExpiryYear" value="" placeholder="YYYY" autocomplete="cc-exp"> 

This works in Safari.