如何解决带有固定位置元素的Chrome移动浏览器地址栏CSS问题？

Question

由于浏览器的URL栏/地址栏，我在Android Chrome移动浏览器上遇到一个非常奇怪的错误。与其他常见浏览器一起使用的网站效果很好。

有一个固定在顶部的滚动按钮（视频：https://streamable.com/21iu2），当此Chrome地址栏出现时，只有当我触摸按钮上方的屏幕时，该按钮才起作用。

滚动至顶部的按钮CSS：

#scrollToTop {
  position: fixed;
  right: 0;
  bottom: 0;
  margin: 1rem;
  z-index: 9997;
  border: 1px solid rgba(255, 255, 255, 0.14901960784313725);
  background: rgba(52, 58, 64, .5);
  cursor: pointer;

  &:hover {
    background: rgba(52, 58, 64, 0.83);
  }

  i {
    color: white;
    font-weight: 800;
    padding: 1rem;
  }
}

组件（角度6）：

import {Component, HostListener} from '@angular/core';

@Component({
  selector: 'app-scroll-to-top',
  template: `
    <a *ngIf="isVisible" id="scrollToTop" class="rounded" (click)="scrollToTop()">
      <i class="fa fa-angle-up" aria-hidden="true"></i>
    </a>
  `,
  styleUrls: ['./scroll-to-top.component.scss']
})
export class ScrollToTopComponent {
  isVisible = false;

  @HostListener('window:scroll', [''])
  onWindowScroll() {
    this.isVisible = window.pageYOffset > 100 ? true : false;
  }

  scrollToTop(): void {
    window.scroll({top: 0, left: 0, behavior: 'smooth'});
  }
}

我该如何解决这些问题？或者如何通过解决方法“解决”这些问题？

感谢帮助。