プッシュメニューの大きな不思議なマージン

Question

私は非常に基本的なサイト構造に「プッシュメニュー」モバイルメニューを実装しました。 メニューはhttp://callmenick.com/post/slide-and-push-menus-with-css3-transitions

に基づいています。私は「右押し」ボタンをクリックすると、右に大きな余白があります。なぜこれが起こっているのか、それをどう修正するのかはわかりません。 IE11ではうまく動作しますが、Chrome v52ではうまく動作しません。

問題の例は、ここで見つけることができます：http://seyoum.net/playground/1/

私は運なしで問題を引き起こす可能性が任意のCSSやマークアップを特定するためにデベロッパーツールを使用しようとしました。

この原因とは何ですか？どのように修正できますか？

---

これ

は、それがどのように見えるとすべきものです、それはIE 11でどのように見えるか：

Answer 1

私は#pageの終了タグを忘れていました。私はとても恥ずかしいです。次回はマークアップを徹底的にチェックします。

Answer 2

あなたを」：

そして、これは問題であり、それはChromeのように見えるものメインラッパーをCSSの-300pxに移動するように設定しますが、メニューの移動のみが必要です。これを削除...

.overlay-wrapper.has-push-right { 
    -webkit-transform: translateX(-100%); 
    -ms-transform: translateX(-100%); 
    transform: translateX(-100%); 
} 

@media all and (min-width:320px) { 
    .overlay-wrapper.has-push-right { 
     -webkit-transform: translateX(-300px); 
     -ms-transform: translateX(-300px); 
     transform: translateX(-300px); 
    } 
} 

A jsFiddle（無料ツール）私はto make one hereあなたのリンクを使用し、次回いいだろう。質問に答えるのがずっと簡単です。質問をクリックした人は、ソリューションをすばやく見て、解決し、テストして、本当に有効な修正が行われたことを確認できます。

Answer 3

空白の理由は、次のCSSルール（簡潔にするため省略接頭辞変種）を持っていることです。

.overlay-wrapper.has-push-right 
{ 
    transform: translateX(-300px); 
} 

.push-menu--push-right.is-active 
{ 
    transform: translateX(0); 
} 

.push-menu--push-right 
{ 
    transform: translateX(300px); 
    position: absolute; 
    width: 300px; 
    right: 0; 
} 

ルールの最後のセットは、コンテナの「右へ」のメニューを配置します。 2番目のルールは翻訳をリセットし、コンテナ内に戻します。最初のものは全体を左に動かします。

もう1つを削除してください。すべて設定する必要があります。