Sticky HTML element gets hidden below the Mobile navigation bar in chrome / Firefox mobile browser. How to fix this? [ UPDATED ]

Question

REQUIREMENT :

I have an action bar with button called Next Scale, which is of position: sticky and bottom: 0 in mobile view.
I want this HTML element to stick to the bottom of the viewport as we scroll and stays to the bottom when it is out of view.

PROBLEM :

In the given GIF image below, the actions bar and the Next scale button goes hidden below the mobile navigation pane, while the same sticky feature requirement works as expected in desktop.
If i scroll to the end of the page and scroll back above, the actions bar work as expected and stays sticky above the navigation pane. But when i reach to the top, it gets hidden again.

QUESTION :

How to make sure the sticky element's bottom calculation starts above the mobile navigation pane, so that the element is always visible ?
If this is the default behaviour in mobile, then how to solve this ?

CODEPEN LINK : ( Please open the "full page view link" in mobile to reproduce issue )

STICKY html issue codepen link ( full page view )

DEMO HD YOUTUBE LINK :

Youtube video link

DEMO :

UPDATE (8/7/22):

Found out that this issue is due to dynamic viewport height changes in mobile browsers ( Ref: https://stackoverflow.com/a/72245072/4894872 ).
Along with the layout styles that i have used in the code. The layout component styles are given below :

.layout {
    display: block;
    position: relative;
    height: 100vh;
    width: 100vw;
    min-height: 100%;
    overflow-x: hidden;
}

Based on CANIUSE, the new viewport unit options like dvh,lvh,svh are currently available only for firefox and safari. (At the time of writing this update. ( Ref: https://caniuse.com/viewport-unit-variants , FIREFOX DEMO: https://youtube.com/shorts/y-q2V3Ps0VQ?feature=share , CHROME DEMO: https://youtube.com/shorts/V2gkdwtbDh8?feature=share )
The closest recreation of the original code is available in this codepen (NOTE: Please open in mobile browsers like Chrome / firefox / edge )-> https://codepen.io/sparkeplug/pen/WNzwerE ( View in DEBUG MODE ).
CODEPEN DEMO VIDEO IN MOBILE: https://youtube.com/shorts/wTrPIruyERs?feature=share
In the above codepen demo, the safe-area-inset values using env() in css doesn't fix the issue.
Recap of the original issue in mobile devices video : https://youtube.com/shorts/lIEfHgYkSjQ?feature=share

QUESTION UPDATED :

How to fix the sticky elements with bottom: 0 not getting obscured by devices navbar due to dynamic viewport height changes, Without using the new viewport unit dvh ?

user_1509905 · Answer

The env() CSS function can be used to insert the value of a user agent-defined environment variable into your CSS, in a similar fashion to the var() function and custom properties. The difference is that, as well as being user-agent defined rather than user-defined. By positioning fixed elements using env() you can ensure that they display in a safe area of the viewport.

.sticky { 
  ...
  bottom: env(safe-area-inset-bottom);
 ...
}

https://developer.mozilla.org/en-US/docs/Web/CSS/env

codepen example : https://codepen.io/aimt/pen/LYdGroR

ensure that you run it in debug mode in your mobile browser:

user_12138592 · Answer

In your CSS add replace the .sec from this:

.sec {
  display: block;
  position:relative;
  height: auto;
  width: 100%;
}

to this:

.sec {
  display: flex;
  flex-direction:column;
  position:relative;
}

What this will do is simply prevent the content from going out of the viewport.

user_4894872 · Answer

As a workaround, setting the top most layout component position to fixed solves the problem.

.layout {
    display: block;
    position: fixed;
    height: 100vh;
    width: 100vw;
    max-height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow-x: hidden;
}

working codepen ( open in mobile browser - Debug mode ):

https://codepen.io/sparkeplug/pen/WNzwerE

user_19330133 · Answer

As you do not have any code shown down here I can give my opinion.

Check the script if you have it.
Check the style of the nav bar (Major) because if it is staying on block which is its parent it will be hidden if you give to it z-index: 999;
Check the position of the element(Major) as I think it is or relative or absolute. Take it out of the parent element and put it into body without parent div(block).

let major = document.querySelector('.element')

window.querySelector('scroll', function() {
    console.log(scrollY)
    if(scrollY === 500px) {
       major.style.position = 'fixed'
       major.style.zIndex = '999'
    } else {
    major.style.position {
       major.style.position = 'static'
       major.style.zIndex = '1'
    }
})

h1 {
  color: black;
  font-size: 24px;
  font-family: 'Roboto';
  width: 100%;
  text-align: center;
  color: #fff;
  padding: 10px 0;
  //position: fixed; Use after reaching the exact y number in console
  //top: 0;
}

.nav-container {
  width: 100%;
  margin: 0 auto;
  background: gray;
}

.nav {
  height: 5000px;
  background: green;
}

Sticky HTML element gets hidden below the Mobile navigation bar in chrome / Firefox mobile browser. How to fix this? [ UPDATED ]

4 Answers