Question

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

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

这是我创建的gif click here

Answer 1

设置左：0 和右：0; 并删除宽度：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>

Answer 2

添加AutoStartUp并设置Intent i = getIntent(); if(i.getStringExtra("name").equals("specificMethod")){ specificMethod(); }这应该可以解决对齐和闪烁问题。

更新：已添加left: 0

z-index:9999;

-webkit-backface-visibility: hidden;

Answer 3

通过将图形密集的CSS功能卸载到GPU（图形处理单元）以在浏览器中获得更好的渲染性能，可以硬件加速图形密集型CSS功能。

使用3D变换就是这样一种方法。

multiline-codec

我已成功使用此hack来获取固定位置的元素，以便在iphone设备上滚动时停止闪烁。

移动闪烁时固定按钮

3 个答案: