I'm experiencing an issue with a simple HTML button on my website. While it works perfectly on Google Chrome, users running Safari on macOS and iOS are facing a problem where the hitbox of the button is offset by about 50px above the actual button area. Is there a way to specifically fix this button for Safari users only?
https://i.sstatic.net/9zMjV.jpg https://i.sstatic.net/pTpMi.jpg
When the cursor is directly on the button, it's inactive.
But if the cursor hovers slightly over the button, it becomes active.
https://i.sstatic.net/Bfqsj.png
.swiper-container .text-container{
padding-top: 17%;
width: 40%;
display: inline-block;
}
/* More CSS code here... */
<div class="text-container">
<h1>"This is the headline."</h1>
<p>This is the author</p>
<a href="https://google.com" class="btn">Button Deactivated</a>
</div> .swiper-container .btn {
margin-top: 40px;
}
.btn, .button:not(.selectric-button), .submit {
display: inline-block;
vertical-align: middle;
border: 2px solid #151515;
background: transparent;
text-transform: uppercase;
font-size: 12px;
line-height: 1;
font-weight: 600;
color: #151515;
line-height: 34px;
padding: 0 35px;
}