一个锚标签在 Firefox 上不起作用，但在 Google 上工作正常，找不到原因

Question

好吧，我最近为当地兽医制作了一个网站，除了这个锚标签由于某种原因在 Firefox 上不起作用，但在 Chrome 上运行良好之外，一切都很好。我似乎找不到原因..

链接到网站 https://www.petvetbihac.com/

<section id="home">
<div class="home">
<div class="home__content">
<img src="assets/img/logo/logo.png" class="home__content--logo img-fluid" alt="logo">
<div class="title__underline"></div>
<p class="home__content--text">Samostalna veterinarska praksa u Bihaću</p>
<a href="#about" class="customBtn smooth-scroll">Više O nama</a>
</div>

锚标记的 CSS：

.customBtn {
font-size: 1.8rem;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
color: $color-white;
background: $color-secondary;
display: inline-block;
padding: .5rem 1rem;
border: 2px solid $color-secondary;
border-radius: 3px;
transition: all .3s ease-in-out;
cursor: pointer;
@media only screen and (max-width:$bp-small-3) {
font-size: 1.7rem;   
}
&:hover {
text-decoration: none;
background: $color-primary;
border: 2px solid $color-primary;
color: $color-white;
cursor: pointer;
}
&__footer {
font-size: 1.4rem;
background: white;
color: $color-primary;
border: 2px solid $color-primary;
@media only screen and (max-width:$bp-small-3) {
padding: .2rem .5rem; 
}
&:hover {
background: $color-secondary;
color: white;
border: 2px solid $color-secondary;
}
}
&__home {
animation-name: moveInBottom;
animation-duration: 1s;
animation-timing-function: ease-out;
}
&__work {
background: $color-secondary;
color: $color-white;
height: 4rem;
&:hover {
background: $color-primary-dark;
color: $color-white !important;
border: 2px solid $color-primary-dark; 
}
}
}

无错误消息。

Answer 1

如果你提高该按钮的z-index，它似乎在 Firefox 中工作。