JavaScriptでChromeのmargin-right値を増やすにはどうすればよいですか？

Question

私のウェブサイトを実現するためには何か助けが必要です。私は右から左へ（ボタンとマージン - 右のアクションで）画面にスライドするJSでアニメーション化されたdivを持っています。 Firefoxではうまく動作しますが、Chromeではうまく動作しません：margin-rightで同じ値で表示されたときはFFで完全に表示されますが、GGでは表示されません。

divを非表示にすると同じ問題が発生します。値が十分に高くないので、まだ目に見える部分があります。 CSSで「-webkit-margin-end」というChromeの値を高く設定していましたが、これは隠れ出しに役立ちましたが、問題が残っていることを示しました。スクリプトでChromeオプションを追加する必要があると思うので、「margin-right」の値（または「-webkit-margin-end」の値）もアニメーション化すると増加する可能性がありますが、私のリクエストに対する答えは実際には見つかりません。

おそらく、私は自分のコードにそれを適用するには十分ではないからです。だから、ちょっとした助けが本当に感謝しています。
さらに、ページの読み込みをスライドさせる方法はありますか？ユーザーがウェブサイトに入ったときにdivを「開く」ようにしたいと思います。

ここに私のコードの一部です：

/* CSS */ 


/* div */ 
#texte { 
background-color:#FFFFFF; 
border-left:0.5px solid #000000; 
color:#000000; 
font-size:0.9vw; 
font-weight:normal; 
font-family:"Proza Libre", sans-serif; 
top:0; 
bottom:0; 
right:0; 
margin-right:-125px; 
-webkit-margin-end:-350px; 
width:19.4%; 
padding:1vw 0.6vw 1vw 1vw; 
float:right; 
position:fixed; 
display:block; 
z-index:1000; 
overflow-x:hidden; 
overflow-y:auto; 
} 


/* button */ 
#plus { 
bottom:2.5vw; 
right:2.5vw; 
position:fixed; 
color:#000000; 
text-align:center; 
font-family:serif; 
font-size: 2.5vw; 
font-weight:normal; 
line-height:2.5vw; 
text-decoration:none; 
cursor:pointer; 
z-index:1000; 
border: 0.8px solid #000; 
-webkit-border-radius: 50%; 
-moz-border-radius: 50%; 
border-radius: 50%; 
width:2.5vw; 
height:2.5vw; 
} 


/* SCRIPT */ 


jQuery.easing.def = 'easeOutBounce'; 

$('#plus').click(function() { 
if($(this).css("margin-right") == "125px") { 
$('#texte').animate({"margin-right": '-=125'}, 'slow'); 
$('#plus').animate({"margin-right": '-=125'}, 'slow'); 
} 
else { 
$('#texte').animate({"margin-right": '+=125'}, 'slow'); 
$('#plus').animate({"margin-right": '+=125'}, 'slow'); 
} 

}); 

のFirefox：

クローム：

Answer 1

のではなく、多分あなたのコードの作業すべてのブラウザで同じ道を作るための方法を見つける試すことができ、各ブラウザ固有のバグのためのアドホック解決策を見つけます。

私は余白を操作しないでください。代わりに、固定幅のあるメインのDIVを持っておき、必要なパディングが入ったDIVをもう1つ持っていることをお勧めします。次に、right属性でアニメーションを行います。

このスニペットをチェックし、このデモがうまく機能するかどうかを確認してください。

function togglePanel() { 
 
    if (parseInt($('#main').css('right')) == 0) { 
 
    // get the current width (+ horizontal padding) (+ the border size * 2) 
 
    width = $('#main').width() + parseInt($('#main').css('padding-left')) + parseInt($('#main').css('padding-right')) + 2; 
 
    $('#main').animate({"right": -width}, 'slow'); 
 
    } else { 
 
    $('#main').animate({"right": 0}, 'slow'); 
 
    } 
 
} 
 

 
$('#toggleMain').on('click', function() { 
 
    togglePanel(); 
 
}); 
 

 
$(document).ready(function() { 
 
    togglePanel(); 
 
});

* {box-sizing: border-box;} 
 

 
#main { 
 
    background:blue; 
 
    position:absolute; 
 
    padding:10px; 
 
    right:-222px; 
 
    top:0px; 
 
    bottom:0px; 
 
    width:200px; 
 
    border:1px solid red; 
 
    } 
 

 
#inner { 
 
    width:100%; 
 
    padding:10px; 
 
    border:1px solid green; 
 
    background:orange; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main"><div id="inner">Here goes the text<br/>and more text</div></div> 
 
<button id="toggleMain">Toggle</button>

Answer 2

クロムと余白を追加するかどうかを検出するためにこれを試してください。

$(document).ready(function(){ 
    var isChrome = !!window.chrome; 

    if(isChrome) { 
    $(".element").css("margin-right", "30px"); 
    } 
}); 

Answer 3

ブラウザの検出は良い習慣ではない、より良い方法は、一般的なクロスブラウザのソリューションを提供することであり、たとえばIs jQuery $.browser Deprecated?

を参照してください。

たとえば、normalize.cssを使用して独自のCSSを適用できます。これはおそらくあなたの必要なCSSを "リセット"するので、あなたのcssはすべてのブラウザでよく見えます。