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 ?

please share working codepen/plunkr to reproduce this, regarding safe area, you might want to look into safe-area-inset-bottom for mobile devices. — Amit, Jul 03 '22 at 22:57
Dynamic viewport units can now be used in all major browsers. Setting `height: 100dvh;` on the `:root` element solves this problem of sticky bottom elements jumping when the browser toolbar auto-hides on scroll. — user5670895, Jan 30 '23 at 21:05

score 2 · Answer 1 · answered Jul 07 '22 at 02:41

2

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:

answered Jul 07 '22 at 02:41

Amit

680
3
10

Thanks for this detailed answer. Even though this is working in the codepen, my actual code still behaves the same way. And almost near a solution as explained here https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser . Elements with bottom 0 are getting hidden because of the dynamic viewport height changes in mobile browser. – Neyo Jul 07 '22 at 12:35
is it possible for you to post an example similar to how your code behaves? – Amit Jul 07 '22 at 13:16
finally i tried setting my layout's height form 100vh to 100dvh. And it's working in firefox browser but not in chrome. When checking in https://caniuse.com/viewport-unit-variants , seems this feature support is only available for Firefox and Safari. And to your question, i'll try to recreate the codepen with all the parent styles i used in code to recreate and update you. But now i need to find a workaround. – Neyo Jul 07 '22 at 15:05
Updated the question with latest findings and new codepen links along with demo videos. – Neyo Jul 08 '22 at 09:22

score 0 · Answer 2 · answered Jul 05 '22 at 16:35

0

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.

answered Jul 05 '22 at 16:35

Salman Malik

923
6
24

Did you try the codepen demo ( above link ) in a mobile browser like Chrome or firefox in android ? Im talking about the STICKY element with bottom : 0 getting hidden below the mobile navbar. – Neyo Jul 05 '22 at 16:41
my bad! have you tried setting height to ```100%``` instead of ```auto```? this might make it cross-browser compatible because when you use position sticky, ```auto``` might cause problems. Set ```height:100%``` and see if it works. – Salman Malik Jul 05 '22 at 17:38
No. Same behavior – Neyo Jul 05 '22 at 17:58

score 0 · Accepted Answer · answered Jul 11 '22 at 04:06

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

score -4 · Answer 4 · answered Jul 04 '22 at 05:43

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;
}

<nav class="nav">
<br>
      <br>
      <br>
      <br>
      <br>
   <div class="nav-container">
      <h1 class="element">Major</h1>
   </div>
</nav>

added codepen link for reference. – Neyo Jul 04 '22 at 06:56 — Neyo, Jul 04 '22 at 06:56

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

4 Answers4

Linked