React页面出现DevTools无法检测的诡异白线问题求助

我的React应用页面上出现了一条诡异的白线，但DevTools完全检测不到它。只要移除任意一个页面组件，这条白线就会消失。我试过调整边框、背景色，修改index.scss样式都没用；还把组件的背景色和边框设为transparent或none，给.App设置100vh或fit-content，甚至给全局*设置透明背景色，依然解决不了问题。

这个问题在Chrome、Edge和Safari浏览器里都存在，而且白线在手机端和桌面端的位置不一样，只有注释掉App.js里的任意一个组件才能让它消失。

App.js代码 #

import AboutPage from "./components/About/AboutPage";
import ContactPage from "./components/Contact/ContactPage";
import CurriculumPage from "./components/Curriculum/CurriculumPage";
import Footer from "./components/Footer/Footer";
import Header from "./components/Header/Header";
import HomePage from "./components/Home/HomePage";
import PortfolioPage from "./components/Portfolio/PortfolioPage";

function App() {
  return (
    <div className="App">
      <Header />
      <HomePage />
      <AboutPage />
      <CurriculumPage />
      <PortfolioPage />
      <ContactPage />
      <Footer />
    </div>
  );
}

export default App;

视图情况 #

• 手机端：页面特定位置出现横向白线
• 桌面端：页面另一位置出现横向白线

内容的提问来源于stack exchange，提问作者Thomas Augot