Safari behaving differently with border width :before and :after pseudo-elements

Question

I have implemented a :hover animation for a link that takes you to another part of the website. When hovered in Firefox or Google Chrome, the width of the border of the :before and :after pseudo-elements are 2px like specified but when checking Safari, I found the width to be thicker than what is expected.

The HTML, CSS and screenshots of the occurrence are below.

Firefox and Chrome:

Safari:

Code:

a {
    text-decoration: none;
    color: inherit;
}
#title {
    color: black;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#gallery-link {
    padding: 15px 0;
    text-align: center;
}
#gallery-link-padding {
    padding: 15px 60px;
}

.frame-effect-click {
    position: relative;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;

    border-radius: 10px;
    transition: 0.4s;
}
.frame-effect-click:after, .frame-effect-click:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    transition: all 0.4s linear, opacity 0.1s 0.4s;
    opacity: 0;
}
.frame-effect-click:after {
    bottom: 0;
    right: 0;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
}
.frame-effect-click:before {
    top: 0;
    left: 0;
    border-top: 2px solid black;
    border-left: 2px solid black;
}
.frame-effect-click:hover:after, .frame-effect-click:hover:before {
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    transition: 0.4s, opacity 0.1s;
    opacity: 1;
}

<div id="title">
  <div id="gallery-link">
    <a id="gallery-link-padding" class="frame-effect-click" href="#">View gallery</a>
  </div>
</div>

Does anyone know why that is and how to fix this issue?