モバイルの点滅中の固定ボタン

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>

ここで私は click here

Answer 1

設定し左：0と右：0;および削除幅：100％;
のzインデックスを必要としないでください：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

left: 0を追加を作成し、これは、アライメントやちらつきの問題を修正する必要がありz-index:9999;を設定しているGIFです。

更新：-webkit-backface-visibility: hidden;を追加

.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; 
 
    left : 0; 
 
    z-index : 99999; 
 
    -webkit-backface-visibility: hidden; 
 
}

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

Answer 3

優れたレンダリングパフォーマンスのためにGPU（グラフィックスプロセッシングユニット）にそれらをオフロードすることにより、ハードウェア加速グラフィックスを多用CSS機能への様々なハックがあります。ブラウザに表示されます。

3D変換を使用する方法の1つです。

.fixedbutton { 
    position: fixed; 
    bottom: 0; 
    ... 
    transform: translateZ(0); /* hack to improve performance */ 
} 

私は正常にiphoneのデバイス上でスクロールに点滅を停止するために、固定配置要素を取得するには、このハックを使用しています。