CODEWITHSUNDEEP
cssandroid-browsermobile-chrome
Victor Oliveira Arêas
Victor Oliveira Arêas

Reputation: 136

position: fixed does not work as expected on Android browsers

I am trying to make a header (with a width of 100vw) fixed in the top-left of a page (with a width of 1024px) that contains a horizontal scroll.

enter image description here

I am using position: fixed and left: 0 to achieve it. It works as expected on iOS mobile browsers and desktop browsers (by resizing the window to a width less than 1024px). However, on Android browsers and on Desktop Chrome devtools device emulation, the header element scrolls with the content horizontally.

You can see the code snippet bellow, or open it on Codepen, use the preview link to test on mobile devices.

Obs: I was able to fix this issue by setting user-scalable=no to meta viewport. This workaround has been used to fix this issue in the past, in old browser versions. However, it should not be necessary in the current versions. Also, I can't use this solution because I don't want to disable zooming.

body {
  padding: 0;
  margin: 0;
}

.header-container {
  height: 60px;
  width: 100%;
}

.header {
  width: 100vw;
  height: 60px;
  background-color: #add8e6;
  position: fixed;
  left: 0;
  display: flex;
  align-items: center;
}

.content {
  width: 1024px;
  height: 400px;
  background-color: gray;
  border: 2px dashed red;
  display: flex;
  align-items: center;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML + CSS</title>
  </head>
  <body>
    <div class="header-container">
      <div class="header">Header</div>
    </div>
    <div class="content">Content</div>
  </body>
</html>

IMPORTANT NOTE: it is not possible to reproduce the issue when running the code snippet from StackOverflow, because the page will receive the meta setting minimum-scale=1.0, which also "fixes" the problem.

Upvotes: 1

Views: 59

Answers (1)

Youth Dream
Youth Dream

Reputation: 992

To solve the issue, I made a wrapper of content div. In this case, when screen width is smaller than 1024, the content wrapper will allow scroll-x but header will be fixed. I think it will solve your current issue.

body {
  padding: 0;
  margin: 0;
}

.header-container {
  height: 60px;
  width: 100%;
}

.header {
  width: 100vw;
  height: 60px;
  background-color: #add8e6;
  position: fixed;
  left: 0;
  display: flex;
  align-items: center;
}

.content {
  width: 1024px;
  height: 400px;
  background-color: gray;
  border: 2px dashed red;
  display: flex;
  align-items: center;
}

.contentWrapper {
  width: 100%;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.contentWrapper::-webkit-scrollbar {
  display: none;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML + CSS</title>
  </head>
  <body>
    <div class="header-container">
      <div class="header">Header</div>
    </div>
    <div class="contentWrapper">
        <div class="content">Content</div>
    </div>        
  </body>
</html>

Upvotes: 0

Related Questions