Safari element on hover with padding not filling whole area - css

Question

Why in Safari (on :hover) not the whole button turns to my hover-color ?
(Something wrong with padding I assume)
--- Result in Safari:
--- Result in Chrome (expected):
.btn,
a.btn{
background-color: #027BFF;
border-color: #007bff;
color: #fff;
border-radius: 0;
padding: 42px 20px;
transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out,box-shadow .2s ease-in-out;
transition-property: color, background-color, border-color, box-shadow;
transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
transition-delay: 0s, 0s, 0s, 0s;
}
.btn:hover, a.btn:hover {
background-color: pink;
color: #fff;
box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 5%);
cursor: pointer;
}
<span>Search</span>

Answer 1

I was having a similar issue with :hover in Safari. On hover, my a button was not filling in completely like your example.
I narrowed the bug down to my font-family:
body { font-family: Inter, 'Arial Narrow Bold', sans-serif; }
I have Inter imported via fonts.bunny.net and if I remove Inter and use a system font the :hover behaves as expected. The moment I use an imported font, the issue comes back.
I was able to fix it completely by using switching to Google Fonts instead of fonts.bunny.net

Answer 2

The problem seems to be with Safari's handling of box-shadow ->
.btn,
a.btn{
background-color: #027BFF;
border-color: #007bff;
color: #fff;
border-radius: 0;
padding: 42px 20px;
transition: color .2s ease-in-out,background-color .2s ease-in-out,border-color .2s ease-in-out,box-shadow .2s ease-in-out;
transition-property: color, background-color, border-color, box-shadow;
transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
transition-delay: 0s, 0s, 0s, 0s;
}
.btn:hover, a.btn:hover {
background-color: pink;
color: #fff;
/* box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 5%); */
cursor: pointer;
}
<span>Search</span>