Having a weird problem that seems to have cropped up over the last 2 weeks specifically with Gmail on Chrome.

We have been using hover over buttons that change background and font colour on hover.

They have been working perfectly well up until a few days ago when we noticed a small white line was appearing along the top inside of the button

This is the code:


.pinkBtn:hover, .pinkBtn .on-hover:hover{color: #ffffff !important; background:#fa64b3 !important;}
.pinkBtn:hover a {color: #ffffff !important; background:#fa64b3 !important;}
<tr>
<td style="font-size:20px; line-height:20px;" width="20">
<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="border-collapse: separate !important; border: 3px solid #fa64b3; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<tr>
<td align="center" valign="middle" class="pinkBtn" style="font-family: Arial, Helvetica, sans-serif, serif; font-weight:600; font-size: 13px; padding: 15px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; cursor:pointer;">
<a class="on-hover" href="https://ue.enablermail.com/pancentric/clickthru.cfm?id=4524" target="_blank" style="line-height: 100%; text-align: center; text-transform:uppercase; text-decoration: none; color: #fa64b3;">WATCH THE VIDEO</a>
</td>
</tr>
</table>
</td>
</tr>

Anyone have any ideas why this would suddenly stop working properly?