When implementing CSS position sticky for a floating header, I have noticed that on some mobile devices there is a small gap of around 1px between "element_b" and "element_c" while scrolling.
#element_a{
width: 100%;
position: -webkit-sticky !important;
position: sticky !important;
top: 0;
}
#element_b{
width: 100%;
position: -webkit-sticky !important;
position: sticky !important;
}
<script>
$("#element_b").css("top", $('#element_a').height());
</script>
<div id="element_a">Sticky header A</div>
<div id="element_b">Sticky header B</div>
<div id="element_c">Content After Sticky header C</div>
Has anyone encountered this issue before or have any ideas on how to fix it? Thank you!