要素幅：100％画面外

Question

私は奇妙な問題があります。トップメニューをwidth: 100%に設定しましたが、読み込み中は画面外に出ます（常に522pxになります）。

デバッグ

私はコンソールにdebugger;で、ページの読み込みを停止しました。要素の計算幅は522ピクセルです。それをクリックすると、私はwidth: 100%になります。ページ内のすべては、メニューを除いてページ幅内にとどまります。

CSS

#mobile_header { 
    vertical-align: middle; 
    position: fixed; 
    background-color: #5d3026; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 50px; 
    z-index: 99998; 
    box-sizing: content-box; 
} 

奇妙な部分
それが唯一のロード中に境界の外に出ます。ページの読み込みが完了すると、フルスクリーンサイズの通常の100％になります。追加のJSはこれに影響しません。 CSSはロードされません（ページロードの一時停止後）。私はまた、すべての内容をhtmlとcssで変更しました（実際にはスクリプトはそれに影響を与えません）、キャッシュをクリアしました。まだ不思議な522px（100％から翻訳されています）に行きます。
私はそれが野生のショットだと知っていますが、誰もそのような状況（すべてのブラウザ上で）を引き起こす可能性について何か推測していますか？

Answer 1

それは私のヘッダ（コンテンツとは別のファイル）は、私がページに見えたように、私は何かを見つけることができませんでした静的な長さ（50em）とvisibility:hiddenで別のアイテムを持っていたことが判明しました。
すべてのヘッダーファイルを分割した後に原因がわかりました。
短いストーリー - width: 100%が画面外に出て、親のサイズが通常の場合、コンテンツに静的なサイズが存在する必要があります。徹底的な検索が役に立ちます。

Answer 2

fixed要素のためには、携帯電話のブラウザでスケールを調整するために、あなたのHTMLにあなたはmeta viewportを持っている100％の幅

#mobile_header { 
    vertical-align: middle; 
    position: fixed; 
    background-color: #5d3026; 
    top: 0; 
    left: 0; 
    right: 0; /* <= */ 
    height: 50px; 
    z-index: 99998; 
    box-sizing: content-box; 
} 

Answer 3

ためleft: 0とright: 0を使用することができますか？終わり

<meta name="viewport" content="width=device-width, initial-scale=1">