Safari中CSS变量与Grid布局适配问题求助

问题现象 #

我开发了一款基于HTML和CSS的应用，某页面使用CSS媒体查询与display:grid布局，该布局在除Safari外的所有浏览器中尺寸显示正常，但在Safari中尺寸计算异常，网格行出现重叠。

我定义了名为--vh的CSS变量，值为window.innerHeight的1%，用于抵消浏览器工具栏影响，常规场景下正常工作，但在Safari的媒体查询中失效。尝试过使用SVH和DVH，问题仍然存在。

实际测试场景：在电脑或其他设备创建游戏，用Safari设备加入，第一个问题页面会停止加载并卡住，Edge或Chrome中渲染正常。

渲染效果对比 #

相关代码 #

HTML #

<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="icon" href="https://trivia.house/favicon.ico">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <meta name="theme-color" content="#000000">
        <meta name="description" content="Free Multiplayer Online Trivia Quiz Games">
        <link rel="manifest" href="/manifest.json">
        <title>Carousel Quiz | Free Multiplayer Online Games | Trivia House</title>
        <script defer="defer" src="/static/js/main.d9851aae.js"></script>
        <link href="/static/css/main.69f4b861.css" rel="stylesheet">
    </head>

    <body>
    
        <noscript>You need to enable JavaScript to run this app.</noscript>

        <div id="root">
            <div class="App">
                <div class="AppResolution">
                    <p id="ResolutionIssueMessage">THIS APPLICATION CAN ONLY BE RUN ON A PORTRAIT-ORIENTATED DEVICE, PLEASE EXPAND THE BROWSER WINDOW TO A SUPPORTED SIZE.</p>
                </div>
                
                <div class="AppContent">
                    
                    <div id="questionWrapper">
                        <div id="questionContainer">
                            <div className="questionBox title">
                                <div className="vText">
                                    <img id="titleQuestion" src='' />
                                </div>
                            </div>

                            <div id="roundInfo" className="questionBox roundInfo"><div className='vText'>Question 1</div></div>
                            <div id="gameCode" className="questionBox gameCode"></div>       
                            <div id="question" className="questionBox question"><div className='vText'>question</div></div>
                            <div id="scores" className="questionBox scores">Scores</div>
                            <div id="answer1" className="questionBox answer1"><div className='vText'>answer1</div></div>
                            <div id="answer2" className="questionBox answer2"><div className='vText'>answer2</div></div>
                            <div id="answer3" className="questionBox answer3"><div className='vText'>answer3</div></div>
                            <div id="answer4" className="questionBox answer4"><div className='vText'>answer4</div></div>
                            <div id="timer" className="questionBox timer"></div>
                        </div>
                    </div>       
                </div>

            </div>
        </div>
    </body>
</html>

CSS（核心代码） #

以下是与问题相关的核心CSS代码（因是React应用，CSS已打包，如需完整代码可告知）：

#questionWrapper{
  
  width: 100%;
  height: calc((var(--containerheight)) * 100px); 
  margin: 0 auto;
  border: black 1px solid;

}

#questionContainer{
  
  display:grid;
  grid-gap: 5px;
  grid-template-columns: calc(35% - 5px) calc(35% - 5px) calc(30%);
  grid-template-rows: 0.8fr 0.8fr 1.8fr 1fr 1fr 1fr;
  height: calc((var(--containerheight)) * 100px);
}

.questionBox {
  
  background-color: rgba(224, 38, 63, 0.6);
  color: #fff;
  border-radius: 15px;
  padding: 20px;
  font-size: calc(1vh + 1vw);
  font-weight: 800;
  text-align: center;
}

#titleQuestion{
  width: 100%;
  animation: bounce-in-right 2s ease;
  max-width: 600px;
}

.title {
  display: table;
  overflow: clip;
  background-color: rgba(224, 38, 63, 0);
  text-align: center;
  grid-column: 1/3;
  grid-row: 1/3;
  padding-top: 50px;
}
.roundInfo {

  display: table;
  grid-column: 3/4;
  grid-row: 1/2;
  font-size: calc(1.25vh + 1.25vw);
}

.gameCode {
  text-align: center;
  grid-column: 3/4;
  grid-row: 2/3;
  background-color: rgba(224, 38, 63, 0);
  
}
.question {
  display: table;
  background-color: rgba(224, 38, 63, 0);
  font-size: calc(1.4vh + 1.4vw);
  color: rgba(224, 38, 63, 1);
  grid-column: 1/3;
  grid-row: 3/4 ;
}
.scores {
  grid-column: 3/4;
  grid-row: 3/7;
}
.answer1 {
  display: table;
  grid-column: 1/2;
  grid-row: 4/5;
}
.answer2 {
  display: table;
  grid-column: 2/3;
  grid-row: 4/5;
}
.answer3 {
  display: table;
  grid-column: 1/2;
  grid-row: 5/6;
}
.answer4 {
  display: table;
  grid-column: 2/3;
  grid-row: 5/6;
}
.timer {
  grid-column: 1/3;
  grid-row: 6/7;
}



.vText{
  display: table-cell;
  vertical-align:middle;

}


/***************************************************************/
@media (max-width: 1000px){


  #questionContainer{
  
    display:grid;
    grid-gap: calc((var(--containerheight))*0.5px);
    grid-template-columns: 100%;
    grid-template-rows: 0px calc((var(--containerheight))*10px) calc((var(--containerheight))*26px) repeat(5,calc((var(--containerheight))*12px));
    height: 100%;
    width: 100%;
  }
  
  .questionBox {
    background-color: rgba(224, 38, 63, 0.6);
    color: #fff;
    border-radius: 15px;
    font-size: calc(1.2vh + 1.2vw);
    font-weight: 800;
    text-align: center;   
  }

  .roundInfo {
    display: table;
    grid-column: 1/2;
    grid-row: 2/3;
  }

  .question {
    display: table;
    background-color: rgba(224, 38, 63, 0);
    font-size: calc(1.2vh + 1.2vw);
    color: rgba(224, 38, 63, 1);;
    grid-column: 1/2;
    grid-row: 3/4;
  }

  .answer1 {
    display: table;
    grid-column: 1/2;
    grid-row: 4/5;
     
  }
  .answer2 {
    display: table;
    grid-column: 1/2;
    grid-row: 5/6;
  }
  .answer3 {
    display: table;
    grid-column: 1/2;
    grid-row: 6/7;
  }
  .answer4 {
    display: table;
    grid-column: 1/2;
    grid-row: 7/8;
  }
  .timer {
    display: table;
    grid-column: 1/2;
    grid-row: 8/9;
  }

 

#GameCodeWidget{
  display: none;
}

#gameCode{
  display: none;
}
 
.title{
  display: none;
}

.scores{
  display: none;
}

}

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