1
コンテキスト：私はdisplay: flexを使用しているコンテナを持っており、ページの中央に1つのsvg要素を垂直にセンタリングしています。ページ上の他の唯一のものは、A）文書フローから取り出され、スペースを占有していない固定ヘッダーと、B）スペースを占有してはならないposition: absoluteのフッターです。センタリングはすべてのブラウザで正しく動作しますが、モバイルクロム/モバイルのiOSは正しく動作します。 Firefoxのモバイルに正しく表示される垂直方向のセンタリング。フレックスボックス垂直センタリング/モバイルブラウザの問題
問題：フレックスコンテナの子要素がIOS SafariとChrome Mobileの中央に配置されていません。アドレスバーが何らかの理由で整列を捨てているようです。誰でも洞察力を提供したり、問題のデバッグ方法を教えてもらえますか？ chrome開発ツールの問題を再現することはできません。
助けてください。ありがとうコミュニティ。ここで
.logo-flexcontainer {
align-items: center;
display: flex;
height: 100vh;
margin: 0 auto;
width: 90%;
@media (min-width: 1024px) {
width: 50%;
}
}
.logo-flexcontainer > div {
flex: 1 0 auto;
}
#mobile-navbar {
display: flex;
align-items: center;
position: fixed; /* Set the navbar to fixed position */
width: 100%; /* Full width */
height: 50px;
top: 0; /* Position the navbar at the top of the page */
transition: transform .1s ease, background-color .5s ease;
&.hidden {
transform: translate3d(0,-100%,0);
}
&.scroll-background {
background-color: rgba(0, 0, 0, 0.8)
}
@media (min-width: 1024px) {
display: none;
}
#page-title {
margin: 5px 0 0 5%;
h3 {
font-size: 6vw;
text-shadow: 1px 1px #000;
@media (min-width: 600px) {
font-size: 2rem;
}
a {
text-decoration: none;
}
}
}
#hamburger {
position: absolute;
width: 50px;
height: 50px;
top: 5px;
right: 10px;
cursor: pointer;
span {
display: block;
position: absolute;
height: 6px;
width: 100%;
background: #FFFFFF;
box-shadow: 1px 1px #000;
&:nth-child(1) {
top: 6px;
}
&:nth-child(2) {
top: 18px;
}
&:nth-child(3) {
top: 30px;
}
}
}
}
footer {
position: absolute;
text-align: center;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
svg {
\t height: 90%;
@media (max-width: 550px) {
\t \t height: 80%;
}
}
}<div class="logo-flexcontainer">
<div>
<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 598.6 323.5">
<g>svg code goes here...</g>
</svg>
</div>
</div>
<footer>
social icons here, code not important
</footer>ここでプロジェクトへのライブリンクです：project linkあなたのAndroidやiPhoneのデバイス上で問題を再現できるかどうかを参照してください。
クロムモバイルとファイアフォックスモバイルのホームページの2枚の写真です。 
左が正しくない方向、右が予想される結果です。
固定ヘッダーがモバイルWebkitブラウザのドキュメントフローから削除されていないようです。 –
'height：100vh'からpercent、' height：100％ 'に変更し、' height：100％ 'をすべての親に追加するとどうなりますか？ 'html、body {height：100％; } ' – LGSon
@Michael_B：あなたは正しい方向に考えているかもしれません。私の最初のガット本能は、アドレスバーがドキュメントフローに追加されたことでした。 LGSonが提案した解決策を試してみましょう –