html - 手机上的固定按钮闪烁

Question

我在屏幕底部为移动用户创建了一个固定按钮。但是当我在我的手机上滚动页面时，按钮在闪烁，而且它不在中心。它在桌面浏览器上运行良好。

这是一个位于屏幕底部的全宽按钮。任何帮助将不胜感激。 如果有帮助，我正在使用 safari 浏览器。当用户向下滚动时 safari 浏览器底部栏隐藏时，该按钮会闪烁。

.fixedbutton {
  position: fixed; 
  bottom: 0;
  background-color:#2bde73;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
   border-radius:5px;
   display:block;
   width: 100%;
   color:#ffffff;
   font-size:15px;
   text-decoration:none;
    padding-top: 10px;
    padding-bottom: 10px;
}

<div align="center"><span class="fixedbutton">Some text here</span></div>

这是我创建的 gif click here

Answer 1

设置left: 0和right: 0;并移除width: 100%;
不需要z-index: 9999

我已经更改了您的演示的 HTML 和 CSS。

更新代码:

.content {
  position: relative;
}
.fixedbutton {
    position: fixed;
    bottom: 0;
    left:0;
    right:0;
    color: #ffffff;
    display: block;
    font-size: 15px;
    text-decoration: none;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    cursor: pointer;
    background-color: #2bde73;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac egestas justo. Aenean enim mi, finibus convallis iaculis sit amet, tristique vitae risus. In porta auctor odio. Aenean porttitor eu nisl in ornare. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus sed turpis eu neque dictum facilisis. Praesent lobortis fringilla consequat.</p>

<p>Cras viverra et ex et convallis. Pellentesque vel tortor ac metus luctus sodales at nec tortor. In non feugiat orci, et hendrerit ante. Praesent urna felis, pellentesque a libero sit amet, imperdiet porttitor augue. Quisque euismod augue sit amet pharetra scelerisque. Donec ac mauris felis. Donec pharetra turpis ipsum, in egestas ipsum elementum sed. Morbi tincidunt egestas felis at sagittis.</p>

<p>Nam iaculis mi vel mauris rhoncus pretium. In lacinia urna non enim rhoncus, eu placerat velit eleifend. Donec aliquet vitae ex id ullamcorper. Donec nec congue elit, vel rhoncus dolor. Integer convallis diam et nisi consequat volutpat. Curabitur finibus, mi quis facilisis finibus, ante nisi scelerisque tortor, vitae maximus nulla quam id magna. Praesent ornare elit sed nulla sagittis, semper efficitur sapien efficitur.</p>

<p>Donec ac purus consequat lorem mollis sagittis at eget massa. Cras diam nisl, tempus ut justo vitae, dignissim aliquet tellus. Nulla euismod leo et luctus dapibus. Nam iaculis velit eget odio suscipit, id commodo arcu tempor. Praesent fringilla nisi diam, quis malesuada lacus consequat ac. Morbi pretium nunc vitae condimentum tristique. Donec iaculis dolor orci, sed tempus nibh fermentum et.</p>

<p>Cras id libero ut risus consequat porttitor quis nec tellus. Nulla faucibus, tellus nec convallis consectetur, diam leo molestie lectus, a auctor est felis a lectus. Etiam eleifend risus urna. Praesent dictum convallis euismod. Maecenas maximus, nulla nec mattis dapibus, ipsum velit porttitor nisl, eget consequat nisl augue et justo. Pellentesque eu laoreet lectus, sit amet semper est. Proin mattis ligula enim, nec facilisis lectus elementum vitae. Proin sit amet varius odio. Praesent nec maximus diam.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac egestas justo. Aenean enim mi, finibus convallis iaculis sit amet, tristique vitae risus. In porta auctor odio. Aenean porttitor eu nisl in ornare. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus sed turpis eu neque dictum facilisis. Praesent lobortis fringilla consequat.</p>

<p>Cras viverra et ex et convallis. Pellentesque vel tortor ac metus luctus sodales at nec tortor. In non feugiat orci, et hendrerit ante. Praesent urna felis, pellentesque a libero sit amet, imperdiet porttitor augue. Quisque euismod augue sit amet pharetra scelerisque. Donec ac mauris felis. Donec pharetra turpis ipsum, in egestas ipsum elementum sed. Morbi tincidunt egestas felis at sagittis.</p>

<p>Nam iaculis mi vel mauris rhoncus pretium. In lacinia urna non enim rhoncus, eu placerat velit eleifend. Donec aliquet vitae ex id ullamcorper. Donec nec congue elit, vel rhoncus dolor. Integer convallis diam et nisi consequat volutpat. Curabitur finibus, mi quis facilisis finibus, ante nisi scelerisque tortor, vitae maximus nulla quam id magna. Praesent ornare elit sed nulla sagittis, semper efficitur sapien efficitur.</p>

<p>Donec ac purus consequat lorem mollis sagittis at eget massa. Cras diam nisl, tempus ut justo vitae, dignissim aliquet tellus. Nulla euismod leo et luctus dapibus. Nam iaculis velit eget odio suscipit, id commodo arcu tempor. Praesent fringilla nisi diam, quis malesuada lacus consequat ac. Morbi pretium nunc vitae condimentum tristique. Donec iaculis dolor orci, sed tempus nibh fermentum et.</p>

<p>Cras id libero ut risus consequat porttitor quis nec tellus. Nulla faucibus, tellus nec convallis consectetur, diam leo molestie lectus, a auctor est felis a lectus. Etiam eleifend risus urna. Praesent dictum convallis euismod. Maecenas maximus, nulla nec mattis dapibus, ipsum velit porttitor nisl, eget consequat nisl augue et justo. Pellentesque eu laoreet lectus, sit amet semper est. Proin mattis ligula enim, nec facilisis lectus elementum vitae. Proin sit amet varius odio. Praesent nec maximus diam.</p>
<span class="fixedbutton">Anchor Link Here</span>
</div>