2

This issue is on both Chrome and Firefox

I have a mobile-only sidebar that shouldn't scroll with the page. It's basically like:

body{
  font-size: 16px;
  width: 100vw;
  height: 200vh;
  background-color: orange;
}

.sideBar{
  height: 100vh;
  position: fixed;
  background-color: blue;
  left: 0;
  top: 0;
  width: 10rem;
}
/* media query for desktop. change the min-width */
@media screen and (min-width: 450px){
  .sideBar{
    position: static;
    height: 20vh;
  }
}
<!DOCTYPE html>
<html>
<head></head>
<body>
  <div class="sideBar">
    Hello
  </div>
</body>

</html>

It works as expected when I resize the window to a narrow size. The side bar doesn't scroll with the page. But when I click on the mobile mockup button, the position: fixed doesn't work any more.

I deployed and checked on my phone, and the sidebar scrolls with my phone. So it's not just a browser mock-up problem.


Problem Walkthrough:
  1. Resizing broswer. position: fixed still works. Notice how the logo on top is cropped which means I scrolled down. I can actually make the width really narrow and scroll pretty far without scrolling the sidebar.

resize window. notice the cropped logo, which means I already scrolled

  1. After clicking on the mock up window

mobile mockup button

  1. position: fixed doesn't work any more and the sidebar scrolls with the page.

enter image description here

Samson Liu
  • 460
  • 4
  • 20

3 Answers3

9

This is kind of late but I solved it a while back adding this line to the <head> of the html document

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>

seems the minimum-scale-1 is the crucial part.

Samson Liu
  • 460
  • 4
  • 20
  • thanks, it saved me a lot of investigation! it seemed tricky, as it was working only when scrolling up for me, not with scrolling down – rukya Dec 30 '21 at 14:30
  • Thanks, this saved me hours of frustration! I've read [this answer](https://stackoverflow.com/a/22778172/1621391) about these meta attributes, but I still don't understand why `minimum-scale=1` solved this problem. Can someone explain why? – WhiZTiM Jun 17 '23 at 11:18
0

The problem, if I understood the explanation correctly, seems to come from width: 100vw on body. Does removing it fix the problem?

Armand
  • 168
  • 2
  • 9
-1

just remove media query css it will work

Rachit Vohera
  • 707
  • 7
  • 10
  • Umm... First of all it should only show on mobile. Second of all it still doesn't work. Just to test it, I removed the media query but as soon as I click the mobile mockup button, the sidebar will still scroll with the page at full width. – Samson Liu Sep 16 '20 at 19:25