css - モバイルおよび固定位置の左メニューからスライド

Question

この問題は通常のブラウザでは再現できませんが、モバイル デバイスでは発生します。

左側のメニューから facebook スタイルのスライドを使用して、ホーム画面を右に押して、position:fixedホーム画面にも適用するので、現在押し上げられているホーム画面を移動せずに左側のメニューをスクロールできます。

問題は、これを行うと、右側のすべてが押しつぶされることです。たとえば、width:100%ホーム画面で使用されているホームページの画像が、画面の右側にある小さなスペースに合わせて縮小されます。テキストもすべて小さなスペースに収まるようにします。これは、ホームページが修正された場合にのみ発生します。

width:autoが問題を引き起こしているようです。

これがjqueryです...

$(document).ready(function() {
$('.btn-navbar ').toggle( 
function() {
    $('#pop-out-left').animate({ left:0 }, 100);
    $('.container').animate({ left:'87%' }, 100);
     $('.container').addClass("fixed-position");
    $('#footer').animate({ left:'87%' }, 100);
    $('#footer').addClass("display-none");
    $('#language_strip').addClass("fixed-position");

}, 
function() {
    $('#pop-out-left').animate({ left: '-87%' }, 100);
    $('.container').animate({ left: 0 }, 100);
     $('.container').removeClass("fixed-position");
    $('#footer').animate({ left: 0 }, 100);
    $('#footer').removeClass("display-none");
    $('#language_strip').removeClass("fixed-position"); 
    $(document).scrollTop(0);
}
);

CSS...

.fixed-position {
position:fixed !important;
}

#pop-out-left { 
overflow:hidden;
position:absolute; 
width: 80%; 
border: 1px dotted gray; 
background: #fff; 
color: white; 
top:0px; 
left: -82%; 
height:auto;
min-height:600px;
padding-bottom: 00%;

}

.container {
width: auto;
 }