html Кнопка Hitbox перемещена в Safari (Mobile и Ma c)

Question

У меня есть простая кнопка HTML. Он полностью функционален в Google Chrome (веб-браузер), но если я тестирую свой веб-сайт в Safari (macOS) и Safari (iOS), Hitbox кнопки теряется в пределах 50px над кнопкой. Есть ли способ исправить кнопку, только если клиенты используют Safari mobil или Safari Ma c?

Если курсор находится на кнопке. Он деактивируется

Если курсор находится немного над кнопкой. Активировано

.swiper-container .text-container{
	padding-top: 17%;
	width: 40%;
	display: inline-block;
}
.dark-colors .btn:not(.grey):not(.alt):not(.white):hover, body.dark-theme:not(.logo-dark) .btn:not(.grey):not(.alt):not(.white):hover, body.light-theme.logo-light:not(.menu-open) .btn:not(.grey):not(.alt):not(.white):hover, .dark-colors .button:not(.grey):not(.alt):not(.white):hover, body.dark-theme:not(.logo-dark) .button:not(.grey):not(.alt):not(.white):hover, body.light-theme.logo-light:not(.menu-open) .button:not(.grey):not(.alt):not(.white):hover, .dark-colors .submit:hover, body.dark-theme:not(.logo-dark) .submit:hover, body.light-theme.logo-light:not(.menu-open) .submit:hover{
	background: #798E9D;
	border-color: #798E9D;
	color: white;	
}
.dark-colors .btn:not(.grey):not(.alt):not(.white):hover, body.dark-theme:not(.logo-dark) .btn:not(.grey):not(.alt):not(.white):hover, body.light-theme.logo-light:not(.menu-open) .btn:not(.grey):not(.alt):not(.white):hover, .dark-colors .button:not(.grey):not(.alt):not(.white):hover, body.dark-theme:not(.logo-dark) .button:not(.grey):not(.alt):not(.white):hover, body.light-theme.logo-light:not(.menu-open) .button:not(.grey):not(.alt):not(.white):hover, .dark-colors .submit:hover, body.dark-theme:not(.logo-dark) .submit:hover, body.light-theme.logo-light:not(.menu-open) .submit:hover {
background: #798E9D;
border-color: #798E9D;
color: white;
}
.swiper-container .btn {
	margin-top: 40px;
	display: inline-block;
}
.dark-colors .btn:not(.grey):not(.alt):not(.white), body.dark-theme:not(.logo-dark) .btn:not(.grey):not(.alt):not(.white), body.light-theme.logo-light:not(.menu-open) .btn:not(.grey):not(.alt):not(.white), .dark-colors .button:not(.grey):not(.alt):not(.white), body.dark-theme:not(.logo-dark) .button:not(.grey):not(.alt):not(.white), body.light-theme.logo-light:not(.menu-open) .button:not(.grey):not(.alt):not(.white), .dark-colors .submit, body.dark-theme:not(.logo-dark) .submit, body.light-theme.logo-light:not(.menu-open) .submit {
border-color: #fff;
color: #fff;
}
.swiper-container .btn {
margin-top: 40px;
display: inline-block;
}
.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;
}
.dark-colors .btn:not(.grey):not(.alt):not(.white):hover, body.dark-theme:not(.logo-dark) .btn:not(.grey):not(.alt):not(.white):hover, body.light-theme.logo-light:not(.menu-open) .btn:not(.grey):not(.alt):not(.white):hover, .dark-colors .button:not(.grey):not(.alt):not(.white):hover, body.dark-theme:not(.logo-dark) .button:not(.grey):not(.alt):not(.white):hover, body.light-theme.logo-light:not(.menu-open) .button:not(.grey):not(.alt):not(.white):hover, .dark-colors .submit:hover, body.dark-theme:not(.logo-dark) .submit:hover, body.light-theme.logo-light:not(.menu-open) .submit:hover{
	background: #798E9D;
	border-color: #798E9D;
	color: white;	
}
.swiper-container .text-container{
	padding-top: 17%;
	width: 40%;
	display: inline-block;
}
@media only screen and (min-width: 800px){
.swiper-container .text-container{
	padding-top: 6%;
	width: 70%;
	display: inline-block;
	}
}
@media only screen and (max-width: 800px){
.swiper-container .text-container{
	padding-top: 13%;
	width: 70%;
	display: inline-block;
	}
}
@media only screen and (max-width: 600px){
	h1{
	font-size: 20px;
	text-transform: none;
	}
.swiper-container .text-container{
	padding-top: 38%;
	width: 88%;
	display: inline-block;
	}
}

<div class="text-container">
    		 <h1>"This is the headline."</h1>
    		 <p>This is the autor </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;
}

Answer 1

попробуйте использовать указанный c префикс браузера:

Chrome: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
iOS: -webkit-
Opera: -o-
Safari: -webkit-

, в вашем случае вам необходимо использовать элемент -webkik- перед css, например:

.btn, .button:not(.selectric-button), .submit{
    -webkik-text-transform: uppercase;
}

и делать это только с нестабильным элементом