带背景填充的元素下方边框线仍隐约可见的问题求助

各位大佬好，我遇到了一个移动端样式的小问题，折腾了半天没搞定，来求助大家！

我的代码情况 #

下面是我写的HTML和CSS，核心要注意的是#selected-tab的样式：

HTML代码 #

<body>
  <header>
    <nav>
      <span id="selected-tab"><a href="/">Home</a></span>
      <span><a href="/blog">Blog</a></span>
      <span><a href="/about">About</a></span>
      <span><a href="/contact">Contact</a></span>
    </nav>
  </header>
</body>

CSS代码 #

body {
  max-width: 650px;
  margin: 0 auto;
}

a {
  text-decoration: none;
  color: black;
}

header {
  padding-top: 100px;
  border-bottom: 1px solid black;
}

nav {
  padding-left: 15px;
}

nav > span {
  position: relative;
  padding: 10px min(5%, 40px) 0;
}

#selected-tab::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid black;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  transform: perspective(5px) rotateX(1deg);
  transform-origin: bottom;
}

#selected-tab::after {
  content: '';
  position: absolute;
  top: 95%;
  right: 0;
  bottom: -4px;
  left: 0;
  transform: perspective(5px) rotateX(1.4deg);
  transform-origin: bottom;
  background: white;
}

这段代码在桌面端显示完全正常，效果符合预期。

遇到的问题 #

但在安卓手机的Firefox和Chrome浏览器里，显示出了一点奇怪的小问题：#selected-tab::after元素的下方有一条隐约可见的缝隙（不是上面倾斜的线没碰到底部边框的问题）。

特别诡异的是，我把手机上的问题截图放到电脑上看时，这条缝隙居然消失了，但在手机上看确实存在。

我已经试过移除transform属性，但这条线还是能看到，实在搞不懂哪里出问题了，求各位帮忙分析一下！

内容来源于stack exchange