CSSでのフッタ固定、スマフォ画面について

Question

URL:
https://webkikaku.co.jp/blog/htmlcss/footer-bottom/

<div id="container">
<div id="header">ヘッダー</div>
<div id="contents">コンテンツ</div>
<div id="footer">フッター</div>
</div>

body , html {
    height: 100%;
}
 
#container {
    width: 100%;
    position: relative;
    height: auto !important;
    height: 100%;
    min-height: 100%;
}
 
#contents {
    padding-bottom: 100px;
}
 
#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100px;
}

こちらのサイトで書かれている方法でcssでのフッタ固定をやったのですが、
PC画面をSP画面表示にして確認した時に、挙動がぷるぷる動いてました。
ぴたっとフッタを固定させてSP画面で表示させたいのですが、
何か足りない記述、cssでの別のやり方などありましたら、ご教授願えないでしょうか？
宜しくおねがいいたします。

Comments

[kei344]

コードは画像で無くテキストで記述ください。その際はコードブロックをお使いください。また、URLにはリンクを張ることができますので、編集よろしくお願いします。

[Nyoki]

上記修正しました。

Answer 1

固定したい要素があるときにぷるぷるする問題は私もぶち当たったことがありますねぇ…
そのときもstaticの要素とrelativeの要素が混在していてかつ絶対配置（固定）があるときになりました。
スクロールするときとか、おそらくバラバラの描画フローになっているものが再レンダリングされるときに処理が間に合わないのかな、と想像しています。
（リフローとかリペイントというのを調べてみてください）

そのときどうしてもfixedを使わないとできないデザインだったので、
最初に

*{position:relative;}

としてしまい、staticの要素をなくして対応しました。

今回のケースに当てはまるかわかりませんしベストな方法ではないかもしれませんが…

Comments

[Nyoki]

原因など書いて頂いてありがとうございます。
詳しく書いて頂いたので、その現象がなぜ起こっているか理解できました。
上記の記述、明日試してみようと思います。

Answer 2

今回はz-index指定の問題だったと思われます。
おそらく解決できたと思うので、一旦閉じます。
お二方ご指導頂き、ありがとうございました。感謝です。

Answer 3

動くサンプル：https://jsfiddle.net/v6mx6xw8/

Windows Firefox / Chrome で問題が再現しません。HTMLの構文エラー、JavaScript など他の要素に原因がありませんか？

Comments

[Nyoki]

再現して頂きありがとうございます。
自分で組んだものにこちらのサイトの記述を組み込んでいるので、
もう一度よく組んだもの確認してみます。