Fixed element height problem/jumps on mobile devices when scrolling

Question

I've a problem with my fixed element on the bottom of my mobile device when I scroll. It looks like that the height get's re-calculated each time I scroll because the document height get's increased on mobile devices.

I think the reason is that the address bar fades out and the document viewport get's larger. I've searched a lot and tried different solutions like setting height: 100% to html and body but without any success.

This is a GIF showing me scrolling on my page on my phone in chrome browser. The transparent thing a the top is the address bar:

And this is my actual code:

#wrapper {
  position: fixed;
  background: darkcyan;
  color: #fff;
  bottom: 0;
  left: 0;
  right: 0;
  top: calc(100% - 100px);
  width: 100%;
}

#bottom-element {
  height: 50px;
  position: fixed;
  background: black;
  display: block;
  bottom: 0;
  width: 100%;
  left: 0;
  right: 0;
}

#title {
  text-align: center;
  padding: 15px;
  height: 20px;
  border-bottom: 1px solid white;
}

#entries {
  display: flex;
  flex-direction: column;
      overflow: scroll;
    overflow-x: hidden;
}

.entry {
  padding: 15px;
  background: cadetblue;
}

<div id="wrapper">
  <div id="title"></div>
  <div id="entries">
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
  </div>
</div>
<div id="bottom-element"></div>

The idea is to make an expanding div from the bottom up to 80% of the screen. So how can I fix this issue? I'm changing the top value dynamically to expand my element so if there is any solution that I can keep my layout would be nice.

Does this answer your question? [Background image jumps when address bar hides iOS/Android/Mobile Chrome](https://stackoverflow.com/questions/24944925/background-image-jumps-when-address-bar-hides-ios-android-mobile-chrome) — Moob, Feb 10 '20 at 15:31
@Moob is this also related to my element? Because he's talking about background images... — Mr. Jo, Feb 10 '20 at 15:31
Maybe. Its certainly an issue with the address bar hiding. Might be something useful in the answers. I've retracted my close vote. — Moob, Feb 10 '20 at 15:35
You might also consider preventing the address bar from hiding: https://stackoverflow.com/questions/18061308/prevent-address-bar-hiding-in-mobile-browsers — Moob, Feb 10 '20 at 15:40
Can't reproduce anything with the given code, might be a problem with the `#wrapper` top value since it is a calculation — Huangism, Feb 10 '20 at 15:55
@Huangism Yes, because you're running the code in the snippet editor. You may need a complete page and run it on mobile. — Mr. Jo, Feb 10 '20 at 15:58
@Mr.Jo Why does `#wrapper` need the top calculation? Can't you just set `bottom: 100px` ? — Huangism, Feb 10 '20 at 16:10
@Huangism as I wrote in my question: "I'm changing the top value dynamically to expand my element". So because of this I can't set just the bottom. — Mr. Jo, Feb 10 '20 at 16:11
@Mr.Jo can you expand it in a different way? increase height, or height will increase based on content, increase padding inside of it? — Huangism, Feb 10 '20 at 16:14
@Huangism take a look at my initial question about this idea: https://stackoverflow.com/questions/60118180/how-can-i-make-a-smooth-expanding-div-from-the-bottom-up-to-85-of-the-viewport/60118502#60118502 You will see the whole functionality in the provided answer. — Mr. Jo, Feb 10 '20 at 16:15
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/207535/discussion-between-mr-jo-and-huangism). — Mr. Jo, Feb 10 '20 at 16:15

Huangism · Accepted Answer · 2020-02-10T17:03:11.360

The issue is the top value is a calulation. I have modified the code in your previous question's answer so that it is done in a different way(always a different way to achieve the same thing).

This example uses height animation instead of the top value. Bottom is set on wrapper so it anchors itself no matter what's going on with the height of the page. Then simply adjust height as needed when you need to

const title = document.getElementById("title");
const wrapper = document.getElementById("wrapper");

title.addEventListener("click", () => {
   wrapper.classList.toggle("expanded"); 
});

#wrapper {
  position: fixed;
  background: gray;
  color: #fff;
  bottom: 42px;
  left: 0;
  right: 0;
  border-radius: 12px 12px 0 0;
  width: 100%;
  transition: height 250ms ease-in-out;
  height: 42px;
}

#wrapper.expanded {
    height: 85vh;
}

#title {
  text-align: center;
  padding: 15px;
  border-bottom: 1px solid white;
}

#notifications {
  display: flex;
  flex-direction: column;
      overflow: scroll;
    overflow-x: hidden;
}

.entry {
  padding: 15px;
}

<div id="wrapper">
  <div id="title">Notifications</div>
  <div id="notifications">
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
  </div>
</div>

Thank you so much for your help! – Mr. Jo Feb 10 '20 at 16:59 — Mr. Jo, Feb 10 '20 at 16:59

Fixed element height problem/jumps on mobile devices when scrolling

1 Answers1