jquery - オフキャンバスモバイルナビゲーション-レンダリング中に点滅

Question

サイトへのライブリンク：個人用サイト

JSFiddle： http: //jsfiddle.net/MguqC/1/ * JS Fiddleには、クラススイッチなどを実行するJavaが含まれていることに注意してください。ただし、ビューポートをモバイルサイズに縮小すると、正常に動作しません。視覚的な理解を深めるために、上記のライブリンクを使用してください。

裏話： 私は自分のWebサイト用に、一部のjqueryクラススイッチを除いてCSSのみを使用するオフキャンバスモバイルメニューを開発しました。ナビゲーションはPHPを使用して動的に生成されています。最初にこのナビゲーションを作成したとき、同じナビゲーションに対して2セットのHTMLを生成する2つの別々のナビゲーションインスタンスがありました。1つはを使用して生成され<nav>、もう1つはを使用して生成され<div id="nav">ます。

HTMLの<nav>セットは、ナビゲーションの全幅デスクトップバージョン用にスタイル設定されました。HTMLの<div id="nav">セットは、メディアクエリを使用してモバイルバージョンのサイト用にスタイル設定されました。メディアクエリを使用して、モバイルバージョンをデスクトップサイズで非表示にし、モバイルメディアクエリでデスクトップバージョンを非表示にして、＃navをに設定しました。display: block;

これは、グラフィックの問題や問題なしで問題なく機能しました。

現在の話：

これで、2つの別々のナビゲーションをより復元力のあるPHP構造に統合しました。とは言うものの、1セットのHTMLを使用して、モバイルなどで異なるスタイルを設定する方がはるかに簡単で効率的です。

私はサイトを複製し、モバイルクラスを相対的なnav > ul > li > ulセレクターに丹念に変更しました。（HTMLのセットが1つあるため、navのIDを使用しなくなりました。デスクトップとモバイルをHTMLのセットに対して機能させる必要があります）。

何らかの理由で、モバイルデバイスにサイトをロードするとき（デスクトップブラウザがモバイルサイズに縮小された場合でも）、ページをロードすると、ナビゲーションリンクがページにロードされてから消え、「フラッシュ」が表示されます。

ナビゲーション全体display: none;をメディアクエリのスタイルの上部に設定してdisplay: block;から、メディアクエリスタイルの下部に設定して、スタイルを設定してキャンバスから移動するまでナビゲーションを非表示にしてから、ブロックするように設定してみました。それが画面外にあるとしても、それを「再表示」させるために。しかし、役に立たない...これは機能しません。

このフラッシュの修正を探していますが、2つの別々のHTMLセットを使用して以前の構造に戻らない限り、どのように行われるかは特に気にしません。

***以下のCSSはID#navを参照していることに注意してください。これは正確です。IDを削除しませんでした。ナビゲーションの大部分をスタイリングするためにIDを使用しませんでした。nav HTML構造は、サブメニューnavの標準です。UL-LI-LIの内部にULがあるAなど。

CSS：

/* 01. MAIN NAVIGATION STYLES */

#nav {display: none !important;} /* IMPORTANT, PREVENTS NAV FROM FLASHING ON MOBILE */

.nav-container { /* THIS HAS BEEN RESET BELOW */
    /*overflow: hidden;*/
    height: 42px; /* height compensating for outer-border */
    border: 1px solid #dfdfdf; /* Outer grey border */
    border-radius: 5px;
}

#nav {display: block !important;} /* IMPORTANT, MAKES NAV VISIBLE AGAIN AFTER FLASH FIX ABOVE */

nav { /* THIS HAS BEEN RESET BELOW */
    height: 40px; /* height compensating to get white and grey border */
    border: 1px solid #fff; /* Inner white border */
    border-radius: 5px; /* rounded borders */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3')";
    background-image: -moz-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -ms-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -o-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#fefefe), to(#f3f3f3));
    background-image: -webkit-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: linear-gradient(top, #fefefe, #f3f3f3);
}

nav ul {
    position: absolute; /* allows us to absolute position the subnavs */
    z-index: 10;
    display: block;
    width: 100%;
    height: 40px; /*height of inner nav for white border */
    padding: 0;
    margin: 0;
}

nav ul > li {
    position: relative; /* added */
    display: inline-block;
    height: 40px;
    padding: 0;
    margin: 0 0 0 -4px;
}

nav ul li:nth-child(1) {
    margin-left: 0px;
    border-radius: 5px 0px 0px 5px;
}

nav ul li a {
    color: #777;
    text-decoration: none;
    display: block;
    height: 24px;
    padding: 8px 16px;
    margin: 0;
}

nav ul li a:visited {
    color: #777;
}

nav > ul > li:hover > a {  /* USING > FORCES LI TO STAY IN HOVER STATE EVEN WHEN IN SUBNAV */
    color: #fff;
    text-decoration: none;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#555555', endColorstr = '#4c4c4c');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#555555', endColorstr = '#4c4c4c')";
    background-image: -moz-linear-gradient(top, #555555, #4c4c4c);
    background-image: -ms-linear-gradient(top, #555555, #4c4c4c);
    background-image: -o-linear-gradient(top, #555555, #4c4c4c);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#555555), to(#4c4c4c));
    background-image: -webkit-linear-gradient(top, #555555, #4c4c4c);
    background-image: linear-gradient(top, #555555, #4c4c4c);
}

nav > ul > li:nth-child(1) > a { /* FIX ROUNDED EDGE FOR FIRST A HOVER STATE */
    border-radius: 5px 0px 0px 5px;
}






/* Sub nav styles start here */

nav ul li > ul { /* BASIC STYLING PLUS HIDE */  /* THIS HAS BEEN RESET BELOW */
    position: absolute;
    display: none;
    z-index: 1;
    width: 150px;
    height: auto;
    top: 100%;
    left: 0;
    border: 1px solid #d4d4d4;
    background: #f6f6f6;
}

nav ul > li:hover > ul { /* ON HOVER MAKE SUB-NAV VISIBLE */
    display: block;
}

nav ul li ul li { /* THIS HAS BEEN RESET */
    position: relative;
    height: 40px;
    display: block;
    padding: 0;
    margin: 0;
    border-top: 1px solid #fff;
    border-right: none;
    border-bottom: 1px solid #f2f2f2;
    border-left: 1px solid #fff;
}

nav ul li ul li a {
    color: #777;
    height: 24px;
    padding: 8px 12px;
    margin: 0;
    background: #fafafa;
}

nav ul li ul li a:hover { /* SUB-NAV HOVER STATE */
    color: #777;
    text-decoration: none;
    background: #fff;
    border-left: 5px solid #555;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: border 0.4s ease;
    -o-transition: border 0.4s ease;
    transition: border 0.4s ease;
}


/* SECOND LEVEL SUB NAV STYLES */

nav ul li ul li ul {
    position: absolute;
    display: none;
    z-index: 1;
    width: 150px;
    height: auto;
    top: -2px;
    left: 100%;
    border: 1px solid #d4d4d4;
    background: #f6f6f6;
}

nav ul li ul li:hover > ul {
    display: block;
}

nav ul li .active {
    color: #fff;
    background: #8dc63f;
    background: -moz-linear-gradient(top,  #8dc63f 0%, #86bd3c 50%, #81b539 51%, #78a934 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8dc63f), color-stop(50%,#86bd3c),            color-stop(51%,#81b539), color-stop(100%,#78a934));
    background: -webkit-linear-gradient(top,  #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%);
    background: -o-linear-gradient(top,  #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%);
    background: -ms-linear-gradient(top,  #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%);
    background: linear-gradient(to bottom,  #8dc63f 0%,#86bd3c 50%,#81b539 51%,#78a934 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8dc63f', endColorstr='#78a934',GradientType=0 );
}

nav ul li a.active {
    color: #fff;
}


nav ul li a span.arrow {
    background: url(../../../images/nav/arrow-down.png) no-repeat 50% 50%;
    width: 9px;
    height: 9px;
    display: inline-block;
    overflow: hidden;
    margin-left: 10px;
    text-indent: -999em;
}

nav ul li ul li a span.arrow {
    text-align: right;
    text-indent: -999em;
    display: block;
    position: absolute;
    overflow: hidden;
    width: 9px;
    height: 9px;
    top: 16px;
    left: 100px;
    margin-left: 20%;
    background: url(../../../images/nav/arrow-right.png) no-repeat 50% 50%;
}

nav ul li ul li a:hover span.arrow {
    left: 105px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: border 0.4s ease;
    -o-transition: border 0.4s ease;
    transition: border 0.4s ease;
}



/* Mobile nav buttons */

.nav-btn {
  display: block;
  width: 1.6em;
  height: 25px;
  padding: -11px;
  border: 0;
  outline: none;
  background: #87be3c url("../../../images/nav/nav-icon.svg") center center no-repeat;
  background-size: 1.875em 1.5em;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.no-svg .nav-btn {
    background-image: url("../../../images/nav/nav-icon.png");
}

.nav-btn:hover, .nav-btn:focus {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.close-btn {
  display: block;
  width: 2.25em;
  height: 2.25em;
  padding: 0;
  border: 0;
  outline: none;
  background: url('../../../images/nav/close-btn.svg') left center no-repeat;
  background-size: 1.875em 1.875em;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.no-svg .close-btn {
  background-image: url("../../../images/nav/close-btn.png");
}

.close-btn:focus, .close-btn:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}







@media all and (min-width: 641px) {

.horizontal-mobile-nav {
    display: none;
}

} /* END MEDIA QUERY FOR MIN-WIDTH 641PX (DESKTOP/TABLET) */


@media all and (max-width: 640px) {

/* 3.0 MOBILE-NAV STYLES
-------------------------------*/
/* SET VISIBLE THE HORIZONTAL MOBILE NAV */

#nav* {display: none !important;} /* IMPORTANT, PREVENTS NAV FROM FLASHING ON MOBILE */

.nav-container { /* THIS HAS BEEN RESET BELOW */
    /*overflow: hidden;*/
    height: 42px; /* height compensating for outer-border */
    border: 1px solid #dfdfdf; /* Outer grey border */
    border-radius: 5px;
}

.horizontal-mobile-nav {
    display: block;
    height: 40px; /* height compensating to get white and grey border */
    border: 1px solid #fff; /* Inner white border */
    border-radius: 5px; /* rounded borders */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#fefefe', endColorstr = '#f3f3f3')";
    background-image: -moz-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -ms-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -o-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#fefefe), to(#f3f3f3));
    background-image: -webkit-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: linear-gradient(top, #fefefe, #f3f3f3);
}

.horizontal-mobile-nav ul {
    position: absolute; /* allows us to absolute position the subnavs */
    z-index: 10;
    display: block;
    width: 100%;
    height: 40px; /*height of inner nav for white border */
    padding: 0;
    margin: 0;
}

.horizontal-mobile-nav ul > li {
    position: relative; /* added */
    display: inline-block;
    height: 40px;
    padding: 0;
    margin: 0 0 0 -4px;
}

.horizontal-mobile-nav ul li:nth-child(1) {
    margin-left: 0px;
    border-radius: 5px 0px 0px 5px;
}

.horizontal-mobile-nav ul li a {
    color: #777;
    text-decoration: none;
    display: block;
    height: 24px;
    padding: 8px 16px;
    margin: 0;
}

.horizontal-mobile-nav > ul > li:nth-child(1) > a { /* FIX ROUNDED EDGE FOR FIRST A HOVER STATE */
    border-radius: 5px 0px 0px 5px;
}

/* RESET THE ABOVE STYLES IN PREPARATION FOR THE MOBILE NAV THIS HAS TO BE A MEDIA QUERY */
nav { height: auto; border: none; border-radius: 0; background-image: none); }
nav ul { position: relative; z-index: 10; display: block; width: auto; height: auto; padding: 0; margin: 0; }
nav ul > li { position: relative; display: block; height: auto; padding: 0; margin: 0; }
nav ul li:nth-child(1) { margin-left: 0; border-radius: none; }
nav ul li a { color: #777; text-decoration: none; display: block; height: auto; padding: 0; margin: 0; }
nav ul li a:visited { color: #777; }
nav > ul > li:hover > a { color: #fff; text-decoration: none; background-image: none;}
nav > ul > li:nth-child(1) > a { border-radius: 0; }
/* Sub nav styles start here */
nav ul li > ul { position: relative; display: block; z-index: 1; width: auto; height: auto; top: 0; left: 0; border: none; background: none; }
nav ul li ul li { position: relative; height: auto; display: block; padding: 0; margin: 0; border: none; }
nav ul li ul li a { color: #777; height: auto; padding: 0; margin: 0; background: none; }
nav ul li ul li a:hover { color: #777; text-decoration: none; background: none; border-left: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
/* SECOND LEVEL SUB NAV STYLES */
nav ul li ul li ul { position: relative; display: block; z-index: 1; width: auto; height: auto; top: 0; left: 0; border: none; background: none; }
nav ul li .active { color: #fff; background: none; }



/* Mobile Nav styles */  /* actual media query stuff from old nav */
nav ul li a span.arrow {
    display: none;
}

nav ul li ul li a span.arrow {
    display: none;
}

#nav {
    position: absolute;
    top: 0;
    padding-top: 100px;
}

#nav:not(:target) { /* not sure what this does */
    z-index: 1;
    height: 0;
}

#nav:target .close-btn {
    display: block;
}

#nav .close-btn {
    position: absolute;
    top: 20px;
    left: 40px;
}

#nav .block {
    position: relative;
    padding: 0;
}


#nav > ul {
    border-bottom: 1px solid #444;
    box-shadow:         0px 15px 15px rgba(8, 8, 8, 0.75);
}

#nav li {
    position: relative;
    padding: 0;
    margin: 0;
}

#nav ul li:last-child {
}

#nav ul li ul li:last-child {
    border-bottom: none;
}

#nav li.is-active:after { /* NOT SURE IF THIS DOES A FUCKIN THING */
    z-index: 50;
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: -0.031em;
    margin-top: -0.625em;
    border-top: 0.625em transparent solid;
    border-bottom: 0.625em transparent solid;
    border-right: 0.625em white solid;
}

#nav li a { /* BUTTON STYLES AND SIZE */
    text-decoration: none;
    padding: 10px 0 10px 20px;
    border-top: 1px solid #444;
    border-bottom: 1px solid #222;  
}

#nav ul li a {
    background: #222222;
    background: -moz-linear-gradient(left,  #222222 0%, #222222 40%, #000000 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#222222), color-stop(40%,#222222),      color-stop(100%,#000000));
    background: -webkit-linear-gradient(left,  #222222 0%,#222222 40%,#000000 100%);
    background: -o-linear-gradient(left,  #222222 0%,#222222 40%,#000000 100%);
    background: -ms-linear-gradient(left,  #222222 0%,#222222 40%,#000000 100%);
    background: linear-gradient(to right,  #222222 0%,#222222 40%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222222', endColorstr='#000000',GradientType=1 );
    opacity: 0.8;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 80);
    filter: alpha(opacity = 80);
}

#nav li a:hover {
    color: #fff;
    opacity: 0.4;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 40);
    filter: alpha(opacity = 40);
}

#nav ul li ul li a {  /* INDENT SUBNAV ITEMS */
    padding-left: 35px;
}

#nav ul li ul li a:hover {

}

#nav ul li ul li ul li a {
    padding-left: 50px;
}

#nav ul li ul li ul li a:hover {

}



/* crazy shit */

.js-ready #nav {
    height: 100%;
    width: 70%;
    background: url(../../../images/nav/hixs_pattern_evolution.png);
    -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
    box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25);
}

.js-ready #nav .block {
    background: transparent;
}

.js-ready #nav .close-btn {
    display: block;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
}

.js-ready #nav .close-btn:focus, .js-ready #nav .close-btn:hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

.js-ready #nav { /* move the nav off canvas */
    left: -70%;
}

.js-ready #canvas {
    left: 0;
}

.js-nav #inner-wrap {
    left: 70%;
}

.csstransforms3d.csstransitions.js-ready #nav {
    left: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.csstransforms3d.csstransitions.js-ready #inner-wrap {
    left: 0 !important;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -o-transition: -o-transform 500ms ease;
    transition: transform 500ms ease;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

.csstransforms3d.csstransitions.js-nav #inner-wrap {
    -webkit-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    -moz-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    -o-transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(70%, 0, 0) scale3d(1, 1, 1);
}

.csstransforms3d.csstransitions.js-ready #nav .block {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.7;
    -webkit-transition: opacity 300ms 100ms, -webkit-transform 500ms ease;
    -webkit-transition-delay: ease, 0s;
    -moz-transition: opacity 300ms 100ms ease, -moz-transform 500ms ease;
    -o-transition: opacity 300ms 100ms ease, -o-transform 500ms ease;
    transition: opacity 300ms 100ms ease, transform 500ms ease;
    -webkit-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -moz-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -ms-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -o-transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    transform: translate3d(70%, 0, 0) scale3d(0.9, 0.9, 0.9);
    -webkit-transform-origin: 50% 0%;
    -moz-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -o-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

.csstransforms3d.csstransitions.js-nav #nav .block {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

#nav {display: block !important;} /* IMPORTANT, MAKES NAV VISIBLE AGAIN AFTER FLASH FIX ABOVE */

}

HTML / PHP：

<section class="nav-container">

        <section class="horizontal-mobile-nav">
            <ul>
                <li class="mobile-nav-btn">
                    <a class="nav-btn" id="nav-open-btn" href="#nav">Mobile Navigation</a>
                </li>
                <li>
                    <a href="index.php">Home</a>
                </li>
            </ul>
        </section>

        <nav id="nav">


        <?php
            echo "<ul>";
                foreach ($nav_array as $nav_title => $nav_data) {

                    echo buildLinks($nav_title, $nav_data, $base, $title);
                }
            echo "</ul>";
        ?>

        <a class="close-btn" id="nav-close-btn" href="#header">Return to Content</a>

        </nav>
        </section><!-- end nav container -->

score 2 · Accepted Answer

問題は、ナビゲーションが存在する可能性のある3つの状態があることです。

デスクトップレイアウト
モバイルレイアウト
モバイルレイアウト（JavaScriptが無効）

表示されているフラッシュは、3番目の状態でのナビゲーションのスタイリングです。スクリプトはクラスを追加し、そのjs-ready場合にのみ、ナビゲーションがキャンバス外に表示されなくなります。

修正は非常に簡単で、CSSの大部分はすでに配置されています。CSSファイルの396行目は次のとおりです。

#nav:not(:target) { /* not sure what this does */
    z-index: 1;
    height: 0;
}

それは、JS以外のフォールバックを提供することです。元のサンプルページでJavaScriptをオフにしてみてください:target。疑似クラスを使用しても、モバイルナビゲーションが機能することがわかります。修正は、これらの行を上記のセレクターに追加することです。

overflow: hidden;
padding: 0;

次に、JavaScriptバージョン（スタイルシートの532行目）のスタイルを適用するときに、これらのプロパティをリセットします。

.csstransforms3d.csstransitions.js-ready #nav {
    left: 0;
    overflow: visible;
    padding-top: 100px;
    ...
}

その場合に残された唯一のことは（それを優先すると考える場合）、3番目の状態（JavaScriptを使用しないモバイルレイアウト）を修正することです。Modernizrとそのスタイリングの大部分が整っているので、それほど難しいことではありません。

jquery - オフキャンバスモバイルナビゲーション-レンダリング中に点滅

1 に答える 1

Related

Reference