CODEWITHSUNDEEP
csssticky
Atanas
Atanas

Reputation: 83

Position sticky strange rendering

I have simple navigation bar with position:sticky that displays not clear when scrolled and everything seems to work fine then it is in the top. When not scrolled When scrolled Close view of not scrolled Close of view of the same nav bar scrolled

As you can see from the images above there seems to be some render problem. Here is the css:

body{
/*For demo purpose*/
height:300vh;
}
* {
    font-family: RobotoThin;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    outline: none;
    -webkit-transition: 1s;
    transition: 1s;
    box-sizing: border-box;
    background-repeat: no-repeat;
    transition: 0.5s !important;
   scroll-behavior: smooth;
}
div.window {

    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    box-sizing: border-box;
    padding: calc(2vh + 2vw);
    height: 100vh;
    width: 95vw;
    position: absolute;
    right: 0;
    top: 0;
    display: none;
    white-space: nowrap;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    background-color: #ecf0f1;
    margin-left: 5vw;
}
#help{
    display:block;
    transition:0s !important;
}
div#help{
height:200vh;
    white-space: normal;
}
div#help  a{
    color:red;
    text-decoration: none;
}
div#nav {
  top: 0;
  position: sticky;
  display: flex;
  justify-content: space-between;
  color: black;
  background-color: white;
  padding-top: 1vmax;
  padding-bottom: 1vmax;
  font-size: 1.2vmax;
  flex-wrap: wrap;
  border-radius: 10em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

div#nav>a {
  color: black;
}

div#nav>*:hover {
  color: gold;
  letter-spacing: 0.3vw;
}

div#nav> :first-child {
  margin-left: 1vw;
}

div#nav> :last-child {
  margin-right: 1vw;
}
<body>
<div class='windows' id='help'>
<div id='nav'> <a>General important info</a> <a>Desktop</a> <a>Math calculators</a> <a>Notes</a> <a>Battery</a> <a>Quotes</a> <a>Settings</a> <a>Passwords and Data</a> </div>
</div>
</body>
Don't mind the color. I use a plugin so you will see everything in white, not in black. Strangely I couldn't get the example to work properly and I can not represent the issue. Hopefully you can take a look at my code and tell what may cause this problem.

Upvotes: 1

Views: 477

Answers (1)

Andy Hoffman
Andy Hoffman

Reputation: 19109

After much fiddling, the culprit is: 

  overflow-x: hidden;


body {
  /*For demo purpose*/
  height: 300vh;
}

* {
  font-family: RobotoThin;
  margin: 0;
  padding: 0;
  /* overflow-x: hidden;     <-- The problem */
  outline: none;
  -webkit-transition: 1s;
  transition: 1s;
  box-sizing: border-box;
  background-repeat: no-repeat;
  transition: 0.5s !important;
  scroll-behavior: smooth;
}

div.window {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  box-sizing: border-box;
  padding: calc(2vh + 2vw);
  height: 100vh;
  width: 95vw;
  position: absolute;
  right: 0;
  top: 0;
  display: none;
  white-space: nowrap;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  background-color: #ecf0f1;
  margin-left: 5vw;
}

#help {
  display: block;
  transition: 0s !important;
}

div#help {
  height: 200vh;
  white-space: normal;
}

div#help a {
  color: red;
  text-decoration: none;
}

div#nav {
  top: 0;
  position: sticky;
  display: flex;
  justify-content: space-between;
  color: black;
  background-color: white;
  padding-top: 1vmax;
  padding-bottom: 1vmax;
  font-size: 1.2vmax;
  flex-wrap: wrap;
  border-radius: 10em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

div#nav>a {
  color: black;
}

div#nav>*:hover {
  color: gold;
  letter-spacing: 0.3vw;
}

div#nav> :first-child {
  margin-left: 1vw;
}

div#nav> :last-child {
  margin-right: 1vw;
}
<body>
  <div class='windows' id='help'>
    <div id='nav'> <a>General important info</a> <a>Desktop</a> <a>Math calculators</a> <a>Notes</a> <a>Battery</a> <a>Quotes</a> <a>Settings</a> <a>Passwords and Data</a> </div>
  </div>
</body>

Upvotes: 2

Related Questions