iOS Safari 9+

Question

'da hızlıca aşağı kaydırdığımda sabit öğeler tıklanamıyor. Sadece iOS Safari 9+ (8.4 iyi) konusunda çok sinir bozucu bir sorunla karşılaşıyorum. Kullanıcı tekrar kaymaya başlayana kadar, eleman ile hizalanmayan görünüm ve gerçek tıklama/vurma alanı nedeniyle artık sabitleştirilebilen sabit elemanlar içindeki sabitleme bağlantıları ile sonuçlanır.

Her seferinde aynı şekilde olmaz ve sistemi "parçalamak" için birkaç deneme yapabilir. Bunun çalışması için içerik görüntü alanından daha uzun olmalıdır.

henüz sorunun yok geçici çözümler. Bu sorunu nasıl çözebilirim?

GÜNCELLEME: Daha fazla test edildikten sonra, sorun yalnızca iOS Safari 9 ve üstü sürümlerde, iOS 8'de test edilmiştir ve sorun yoktur.

GÜNCELLEME 2: Bu position:fixed; ve hatta position:-webkit-sticky; kullanarak en web sitelerinde olur artık açık. Size ait :)

HTML kontrol etmek isteyebilirsiniz

<section> 
    <article></article> 
    <article></article> 
    <article></article> 
</section> 

<div class="sticky"> 
    <a href=""></a> 
</div> 

CSS:

html, body { 
    margin:0; 
} 

article { 
    display: block; 
    height: 200px; 
    width: 100%; 
    margin-bottom: 20px; 
    background: whitesmoke; 
} 

.sticky { 
    width:100%; 
    height:100px; 
    position: fixed; 
    bottom:0; 
    background: orange; 
    text-align:center; 

} 

.sticky a { 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    background: yellow; 
} 

http://codepen.io/toobulo/pen/dGEodo

bu kadar olduğu gibi mesele, Codepen editörü içinde olmaz Mobil Safari'nin elastik/araç çubuğu boyutu değişiklikleriyle ilgili. Kendi sayfasına kodu belgeyi veya şu bağlantıyı kullanın:

https://cdn.rawgit.com/anonymous/3234ad797dd80e5f8905/raw/ab51c4d8621cfb827f83a33d21940579f8682cde/index.html

Answer 1

Bu sorun ios içinde sıçrama etkisi ile ilgilidir ve araç çubuğunu & başlık çubuğu kaybediyor. Bunu düzeltmek için bulduk tek yolu aşağıdaki yapmaktır:

html, 
body { 
    height: 100%; 
    width: 100%; 
    overflow: auto; 
    -webkit-overflow-scrolling: auto 
} 

Siz de sadece mobil için çalışır böylece kesme noktası yapabiliriz. Bu yardımcı olur umarım. Taşma kaydırması eklendi.

Answer 2

.sticky a bağlantı mutlak ve aşağıdaki CSS'yi uygulayabilirsiniz, böylece bağlantı pencere/tarayıcıdan bağımsız olacaktır. Bu geçici çözüm sorunu giderir iken

.sticky { 
    width: 50px; 
} 
.sticky a { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    margin: auto; 
}