「position:fixed」は親要素と子要素どちらかのみ使用する

パッと見の見た目は完璧でも、スマホですくロールした際に一瞬ちょっと下に下がってしまうという表示バグが発生したのでメモ。

HTML

<div class="wrapper">
 <div class="body">
  <h1>タイトル</h1>
 </div>
</div>

CSS

.wrapper{
position:relative;
}
.body{
position:fixed;
bottom:0;
left:0;
width:100%;
}
h1{
position:fixed;
top:0;
left:0;
width:100%;
}

こんな感じで親はbottom、子はtopと指定していると子の方がリロードやスクロールした際に動いてしまいます。
解決方法は親子関係から並列にしてあげることだけになります。