Div with sticky position relative to the bottom jumps around when scrolling

Question

This is something that I observe on Chrome on mobile (Android). If I have a div with that's using sticky for the position property and is positioned relative to the bottom, the div will be properly aligned when the page is first loaded, but when scrolling the page so that the browser's navigation bar gets hidden, then the div will jump up and no longer be aligned to the bottom.

Here's an example, using this div

<div style="background-color: red; position: sticky; bottom: 0">Hello world!</div>

I suspect the position is not being recalculated once the viewport gets resized. Is this a bug or is this the intended behavior? What's a good way to trigger the repositioning of the div (ideally without JS)?

Answer 1

If you add any fixed-position element to the page, the bug with the sticky position element just goes away.

The fixed-position element somehow triggers some form of tracking that probably ought to be triggered by sticky-positioned elements, too - so just by adding an empty element with position: fixed the problem is solved.

<div style="position: fixed;"/>