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. As you can see from t...

问题:

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.


回答1:

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>

  • 发表于 2019-02-20 17:35
  • 阅读 ( 263 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除