html - レイアウトが壊れるのは、ブレークポイントを下回り、それを超えて再度展開した場合のみです。

Question

解決済み: 以下の回答を参照してください。なぜこれが起こったのか、なぜ修正が機能したのかを知りたいです。

更新: 私の問題は、この webkit のバグに関連している可能性があります:

バグ 53166: メディアクエリの「表示」スタイルが、サイズ変更後に正しく再適用されない?

デスクトップサイズのメディアクエリが起動すると、ウィンドウの幅がそのサイズを下回っても「起こらない」わけではない何かがナビゲーションバーに発生します。この問題は、Chrome または Safari でのみ発生するようです。プロパティに関係していると思いますがdisplay、バグのように感じます。

ここで動作を確認できます。

モバイルメニューの問題を再現するには、Chrome / Safari または iPad Safari から始めます。

幅が 1023px を超えるブラウザで開始します (iPad では横長)
ブラウザを 1024px 未満にする (または iPad を回転させる)
[メニュー] をクリックします -- 問題 #1 が表示されます

モバイルメニューのスクリーンショット

デスクトップメニューの問題を再現するには

幅が 1023px を超えるブラウザで開始する
ブラウザを 1024px 未満にする
ブラウザの幅を再度 1023px より大きくする
問題＃2が表示されます

デスクトップメニューのスクリーンショット

ノート：

1024px 未満で開始すると、すべてがうまく機能します。
1024px 未満で開始すると、ウィンドウを 1024px 以上に拡大すると、すべてがうまく機能します。
1024px 以上から始めると、すべてうまくいきます。
これは、1023px より上で開始し、サイズを小さく変更した場合にのみ壊れます。

この問題は、使用している table-cell CSS プロパティと関係があると思いますが、わかりません。

ここでいくつかの JS が実行されていますが、JS が無効になっていても問題が発生します。

今のところ、答えが簡単であることを期待して、ヘッダー HTML / CSS を含めます。

HTML

<div class="header">
    <img class="logo" src="/assets/logo.png" />
    <button id="toggle" class="closed"></button>
</div>
<div class="spacer clearfix"></div>
<div id="nav">      
    <ul class="primary-nav">
        <li><a href="#">Sundays</a></li>
        <li><a href="#">Learn More</a></li>
        <li><a href="#">Citygroups</a></li>
        <li class="desktop-logo"><a href="#"><img src="/assets/logo.png" /></a></li>
        <li><a href="#">Discipleship</a></li>
        <li><a href="#">Sermons</a></li>
        <li><a href="#">Get in Touch</a></li>
    </ul>
</div>

メディアクエリを含む CSS は次のとおりです。

.header {
  position: absolute;
  width: 100%;
  height: 70px;
  z-index: 9999;
  background: #FFF;
}

img.logo {
  float: left;
  width: 40.3125%;  /* 129px / 320px */
  margin: 24px 0 23px 9.375%; /* 24 0 23 30 */  
}

.spacer {
  height: 70px;
}

/* Main Nav */

button#toggle {
  float: right;
  border: none;
  width: 6.5625%;
  min-height: 23px;
  margin: 24px 9.375% 23px 34.375%; 
  padding: 0;
  background: url(assets/nav-toggle.png) center no-repeat;
}

button#toggle.opened {
  background: url(assets/nav-toggle-opened.png) center no-repeat;
}

#nav {
  width: 100%;
  height: -moz-calc(100% - 70px);
  height: -webkit-calc(100% - 70px);
  height: calc(100% - 70px);
  z-index: 9999;
}

.js #nav {
  clip: rect(0 0 0 0);
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

#nav ul {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: table;
  list-style: none;
  background-color: #363636;
  border-bottom: solid #1E1E1E 1px;
}

#nav li {
  width: 100%;
  display: table-row;
}

#nav li a {
  display: table-cell;
  vertical-align: middle;
  border-top: solid #1E1E1E 1px;
  padding: 0 0 0 9.375%;
}

#nav li.desktop-logo { /* Necessary for centered logo on wide displays */
  display: none;
}

/*--------------------------------------------------
             4. HOME - LARGE MOBILE
              - Min-Width: 321px -
---------------------------------------------------*/

@media screen and (min-width: 321px) {

    img.logo {
      max-width: 159px;
      margin: 20px 0 21px 7.03125%; /* 20 0 21 54 */    
    }

    h1 {
      font-size: 2.7969em;
    }

    h5 {
      font-size: 1.3125em;
    }

}


/*--------------------------------------------------
             4. HOME - MOBILE LANDSCAPE 
               - Min-Width: 321px -
             - Orientation: Landscape -
---------------------------------------------------*/

@media screen 
    and (min-width: 321px) 
    and (max-width: 768px) 
    and (orientation: landscape) {

    .headline {
      display: block;
      width: auto;
      height: auto;  
      overflow: none;
      margin-top: 5%;
    }

}



/*--------------------------------------------------
             4. HOME - SMALL TABLET / LARGE PHONE
                  - Min-Width: 481px -
---------------------------------------------------*/

@media screen 
    and (min-width: 481px) {

    img.logo {
      max-width: 159px;
      margin: 20px 0 21px 7.03125%; /* 20 0 21 54 */    
    }

    h1 {
      font-size: 3.3438em;
    }

    h5 {
      font-size: 1.625em;
    }

}



/*--------------------------------------------------
             5. HOME - LARGE TABLET LAYOUT
                  - Min-Width: 601px -
---------------------------------------------------*/

@media screen 
    and (min-width: 601px) {


    h1 {
      font-size: 4.5625em;
    }

    h5 {
      font-size: 2.25em;
    }


}

/*--------------------------------------------------
             5. HOME - DESKTOP LAYOUT - Min-Width: 1024px
---------------------------------------------------*/

@media screen 
    and (min-width: 1024px) {

    .header {
      position: fixed;
      top: 0;
      height: 87px;
      background: none;
      display: none;
    }

    img.logo, .spacer {
      display: none;
    }

    .js #nav {
      position: relative;
    }

    .js #nav.closed {
      max-height: none;
    }

    #nav-toggle {
      display: none;
    }

    button#toggle {
      display: none;
    }

    #nav {
      height: auto;
    }

    #nav ul {
      height: 87px;
      width: 66.6666666667%;
      min-width: 1024px; 
      margin: 0 auto;
      border: 0;
      background-color: #fff;
    }

    #nav li {
      width: auto;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      font-size: .875em;
    }

    #nav li a {
      display: inline-block;
      vertical-align: none;
      text-align: center;
      line-height: 87px;
      border: 0;
      padding: 0;
      margin: 0;
    }

    #nav li a, #nav li a:active, #nav li a:visited {
      color: #58585A;
    }

    #nav li a:hover {
      color: #FAAC1D;     
    }

    #nav li.desktop-logo {
      display: table-cell;
      width: 206px;
      padding: 0 20px;
    }

    #nav li.desktop-logo img {
      padding: 0;
    }

    #nav li.desktop-logo a {
      display: inline;
      line-height: 0;
    }

    .flexslider {
      height: -moz-calc(100% - 87px);
      height: -webkit-calc(100% - 87px);
      height: calc(100% - 87px);
    }

    .headline hr {
      width: 50%;
    }
}

score 0 · Accepted Answer

私自身の多くの質問に答えて申し訳ありません。誰もこれを見ませんでした。これは誰かを助けると確信しています。

Webkit のバグに関して、この同様の質問を見ました。display: table-row を UL タグに追加するという彼らのソリューションは機能しました。ただし、私の状況では、UL を 100% 未満の幅で中央に配置する必要がありましたが、どちらもtable-row.

最終的な解決策はdisplay: table、親 div (#nav) に移動することでした。これを行って<ul>タグから削除すると、すべてが完全に機能しました。どうしてか分かりません。

元のリンクが更新され、現在機能しています。

最終的な作業用 CSS (メディアクエリのみ):

/*--------------------------------------------------
             5. HOME - DESKTOP LAYOUT - Min-Width: 1024px
---------------------------------------------------*/

...

    .js #nav {
      position: relative;
      display: table;
    }

...

    #nav ul {
      height: 87px;
      width: 66.6666666667%;
      min-width: 1024px; 
      margin: 0 auto;
      border: 0;
      background-color: #fff;
    }

html - レイアウトが壊れるのは、ブレーク ポイントを下回り、それを超えて再度展開した場合のみです。

1 に答える 1

Related

Reference

html - レイアウトが壊れるのは、ブレークポイントを下回り、それを超えて再度展開した場合のみです。