web-dev-qa-db-ja.com

位置：ChromeおよびIE

意図されたもの

CSSとJavaScriptを使用して off canvas men を使用しています。キャンバス外メニューが意図したとおりに機能しています。画面の左側にあり、メニューがトリガーされたときに移動するサイドバーメニューが必要です。アイデアは、幅100pxで高さが100％で常に画面の左側にあるメニュートリガーを持つことです。絶対位置を使用すると、すべてのブラウザの高さに問題がありました。固定位置のFirefoxを使用すると問題なく動作しますが、以下の問題が発生します。

エラー

Firefoxの問題：私の知る限り、ありません。

Chromeの問題：サイドバーのメニュートリガーを数ピクセル下にスクロールした後、ページ全体が引き伸ばされません。

Internet Explorer：サイドバーメニューがトリガーされると、サイドバーが完全に消えるようです。

jsFiddle

私のコードはHTML、CSS、JavaScriptの両方で重いため、 jsFiddle 。この問題は、ChromeおよびInternet Explorerで私の知る限りでのみ発生します。ページを少し下にスクロールし、左側のメニューボタンをクリックすると、問題を再現できます。

スクリーンショット

Off Canvas Menu Issues

NOTE WORTHY HTML CODE（Full Code in Fiddle）

<div id="sbContainer" class="sbContainer">
    <div class="sbPush">
        <header class="contain-to-grid sbMenu sbFX">
            <nav class="top-bar" data-topbar>
                <ul class="title-area show-for-small-only"><!--SITENAME--></ul>
                <section class="top-bar-section"><!--LINKS--></section>
            </nav>
        </header>
        <div class="sbContent-one">
            <div class="sbContent-two">
                <div class="sbMenuTrigger" data-effect="sbFX"><!--SIDEBAR TRIGGER--></div>
                <div class="sbMainContent" role="document"><!--PAGE CONTENT--></div>
            </div>
        </div>
    </div>
</div>

NOTE WORTHY CSS CODE（Full Code in Fiddle）

html, body, .sbContainer, .sbPush, .sbContent-one {
    height:100%
}
.sbContent-one {
    overflow-x:hidden;
    background:#fff;
    position:relative
}
.sbContainer {
    position:relative;
    overflow:hidden
}
.sbPush {
    position:relative;
    left:0;
    z-index:99;
    height:100%;
    -webkit-transition:-webkit-transform .5s;
    transition:transform .5s
}
.sbPush::after {
    position:absolute;
    top:0;
    right:0;
    width:0;
    height:0;
    background:rgba(0,0,0,0.2);
    content:'';
    opacity:0;
    -webkit-transition:opacity 0.5s,width .1s 0.5s,height .1s .5s;
    transition:opacity 0.5s,width .1s 0.5s,height .1s .5s
}
.sbMenu-open .sbPush::after {
    width:100%;
    height:100%;
    opacity:1;
    -webkit-transition:opacity .5s;
    transition:opacity .5s
}
.sbMenu {
    position:absolute;
    top:0;
    left:0;
    z-index:100;
    visibility:hidden;
    width:244px;
    height:100%;
    background:#872734;
    -webkit-transition:all .5s;
    transition:all .5s
}
.sbMenu::after {
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.2);
    content:'';
    opacity:1;
    -webkit-transition:opacity .5s;
    transition:opacity .5s
}
.sbMenu-open .sbMenu::after {
    width:0;
    height:0;
    opacity:0;
    -webkit-transition:opacity 0.5s,width .1s 0.5s,height .1s .5s;
    transition:opacity 0.5s,width .1s 0.5s,height .1s .5s
}
.sbFX.sbMenu-open .sbPush {
    -webkit-transform:translate3d(300px,0,0);
    transform:translate3d(244px,0,0)
}
.sbFX.sbMenu {
    -webkit-transform:translate3d(-100%,0,0);
    transform:translate3d(-100%,0,0)
}
.sbFX.sbMenu-open .sbFX.sbMenu {
    visibility:visible;
    -webkit-transition:-webkit-transform .5s;
    transition:transform .5s
}
.sbFX.sbMenu::after {
    display:none
}
.no-csstransforms3d .sbPush,.no-js .sbPush {
    padding-left:244px
}
.sbMenuTrigger {
    background-color:#b23445;
    cursor:pointer;
    height:100%;
    width:100px;
    position:fixed;
    left:0;
    top:0
}
.sbMainContent {
    margin-left:100px;
    width:calc(100% - 100px);
    top:0;
    padding-top:50px;
    position:absolute;
    height:100%
}
javascripthtmlcssgoogle-chromeinternet-explorer
43
Simon Hayter

変更をほとんど必要としない回避策を次に示します。

FF、Chrome、IE11/10の最新バージョンで一貫して動作します。

更新された例

.sbContent-one {
  overflow: visible;       /* Or remove overflow-x: hidden */
}
.sbMainContent {
  overflow-x: hidden;
}
.sbMenuTrigger {
  position: static;        /* Or remove position: fixed */
}

Chromeで問題を解決する最も簡単な方法は、overflowを.sbContent-oneから.sbMainContentに移動することです。そうすることで、 .sbMenuTriggerは兄弟要素であるため、実際には.sbMainContent要素（問題を解決）を超えてスクロールします。

現在、ブラウザ全体でfixed要素がどのように配置されているかについて 多くの不整合 があります 要素に対して相対的に配置されています それは translate3dを使用して変換されます =。 IE=の問題は、fixed要素がtranslate3dを使用して変換された要素を考慮せずにウィンドウに対して相対的に配置されているために発生しました。これにより、固定配置が完全に回避され、.sbMenuTriggerを削除して（またはデフォルトのposition: fixedでオーバーライドして）、要素position: staticを通常のフローに戻します。これにより、サイドバーが次のように展開されます。期待された。

言い換えると：

  • overflow-x: hiddenから.sbContent-oneを削除します（またはoverflow: visibleでオーバーライドします）。
  • overflow-x: hiddenを.sbMainContentに追加します。
  • position: fixedから.sbMenuTriggerを削除します（またはposition: staticでオーバーライドします）。
26
Josh Crozier

これがあなたの問題に対する私の解決策です。 3つの市長のブラウザーでテストされ、正常に動作します！

フィドルを参照

次のクラスの私の変更を見てください。

  • .sbContent-oneからの相対位置を削除
  • 高さを追加：100％_.sbContent-two（新しいルール）
  • .sbMainContentの主な変更点
  • .sbMenuTriggerの絶対位置

主な問題は：

  1. .sbContent-oneおよび.sbMainContentからの不要な相対位置および絶対位置。
  2. 固定位置はウィンドウを基準にしているため、要素を翻訳するときの動作はブラウザーによって異なります。
10
Jose Ch.

私はそれを最新のchrome/IE11で動作させることができました。

jsfiddle

私は

        <div class="sbMenuTrigger" data-effect="sbFX">
            <div class="sbMenuIcon">
                <div class="sbMenuIconBackground"></div>
                <div class="sbMenuIconOverlay"></div>
            </div>
            <div class="sbMenuLogo">
                <div class="sbMenuLogoBackground"></div>
                <div class="sbMenuLogoOverlay"></div>
            </div>
        </div>

<header>タグの終わりで、CSSは次のようになります。

.sbMenuTrigger {
    background-color:#b23445;
    cursor:pointer;
    width:100px;
    position:absolute;
    right:-100px;
    top:0;
    bottom: 0;
}

位置固定+変換は、すべてのブラウザーで常に歓迎されるわけではありません。

2
romuleald