インスタント メッセージング スタイルのビューを備えた Web アプリで、Chrome (Firefox ではなく) に奇妙なバグが見られます。入力ボックスはページの下部に絶対的に配置され、高さXがありますが、メッセージのスクロール ペインはbottom: X、ペインの下部が入力ボックスと並ぶように絶対的に配置されます。
メッセージ ペイン内には多くのメッセージがあります。これらのそれぞれには、絶対配置された子があります。これらの内部の子のいずれかのコンテンツが (たとえば、jQuery の で.html()) 変更されると、下部メッセージの下マージンは無視されます。
最小の jsfiddle の例を次に示します。メッセージペインを一番下までスクロールします。ボタンをクリックすると、メッセージ ペインのサイズを決定する際に、下部のメッセージ ボックスの余白が考慮されなくなっていることがわかります ( #a)。
私の回避策は、絶対配置された子を削除することです。jsfiddle でon に変更position: absoluteすると、バグが発生しなくなったことを確認できます。しかし、なぜこの問題が起こっているのか興味があります。float: left#inner