3

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>

Before scrolling After scrolling

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)?

Hans Lehnert
  • 444
  • 3
  • 10
  • If you want the div to stay aligned at the top, you would use sticky positioning, but for the bottom, it is `position: fixed`. – Max Voisard Sep 29 '22 at 06:21
  • 1
    @MaxVoisard Well, `fixed` doesn't have this issue, but the behavior is different for fixed as it doesn't get unstickied when you scroll past it and it's space doesn't get reserved. – Hans Lehnert Sep 29 '22 at 06:24
  • 1
    Sorry, looks like I read through your question too fast. This link might be what you're looking for: https://stackoverflow.com/questions/72830064/sticky-html-element-gets-hidden-below-the-mobile-navigation-bar-in-chrome-fire – Max Voisard Sep 29 '22 at 06:31
  • Hi @HansLehnert, were you able to solve the above issue? I'm seeing the same behaviour in Firefox and Chrome – iacoware Dec 27 '22 at 14:30
  • 1
    @iacoware I wasn't able to find a solution without JS, but I posted what I'm currently using below – Hans Lehnert Dec 28 '22 at 20:30

2 Answers2

0

I haven't been able to find a solution without JS, so this is roughly what I'm currently using.

Inside the div that I wasn't to sticky to the bottom, I added a div with fixed position and transparent color

<div id="hiddenDiv" style="position: fixed; color: transparent;"></div>

And then add some code to change the contents on a resize event

var repositionKey = false;

function onResize() {
  repositionKey = !repositionKey;
  document.getElementById("hiddenDiv").innerHTML = repositionKey;
}

addEventListener("resize", onResize);

This seems to trigger the position recalculation for the parent element and keeps the sticky div in the right place.

Hans Lehnert
  • 444
  • 3
  • 10
0

i have same problem in mobile chrome with block which have posotion:sticky; bottom:0, it always jumping, but i find this solution on https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

// We listen to the resize event
window.addEventListener('resize', () => {
  // We execute the same script as before
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});
FireMonster
  • 1