React组件页面缩放时背景不跟随元素，与background-size: cover相关问题

针对评论的补充编辑 #

正如你所见，background-size: cover 选择器似乎在某种程度上影响了缩放能力，取消选中该选择器后，我就能正常缩放背景了。

问题描述 #

我有一个带背景的React应用，放大网页时背景保持静态，不跟随其余元素一起缩放，这就导致缩放到一定程度时背景仅占据屏幕上半部分。
如下为示例，你可以看到标注的蓝色区域为元素尺寸大于背景的区域，此时背景已无法铺满屏幕：

相关代码 #

React组件代码 #

<div id="app" className="d-flex h-100 flex-column home-background">
    <Provider value={providing}>
      <div className="app-dash">
        <LoggedInNav />
        <ChallengeModal/>
        <TeamsModal/>
        <ComingSoonModal/>
        <hr id="hr-below-nav"/>
        <div className="transition-group-dash">
          <TransitionGroup>
            <CSSTransition key={location.key} classNames="fade" timeout={100}>
                <Router>
                  <Route path="/app/cat" component={Categories} />
                  <Route path="/app/faq" component={Faq} />
                  <Route path="/app/contact" component={Contact} />
                  <Route path="/app/logout" component={Logout} />
                </Router>
            </CSSTransition>
          </TransitionGroup>
        </div>
      </div>
    </Provider>
</div>

背景图CSS代码 #

.home-background{
  background-image: url("./assets/backgrounds/loading-background.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  height:100%;
}

全局基础CSS代码 #

html, body {
  margin: 0;
  height: 100%;
}

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400&display=swap');
body{
  font-family: 'Source Sans Pro', sans-serif !important;
}

#root{
  height:100%;
  width: 100%;
}

html, body, #app, #app>div {
  height: 100%;
}

疑问 #

是否有可行的解决方法？据称缩放功能是为无障碍设计的，从未被设计为保留布局，因此我认为这可能只是默认行为。但我不想贸然假设，若能优化得更符合生产环境要求再部署会更好。

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