2012-05-05 44 views
8

Yani bu intersting sorunu Ben henüz olarak düzeltmek mümkün olmamıştı mobil safari bu web uygulaması ile yaşıyorum.ilginç mobil safari gizli içerik sorunu

Tıklamada görünen bir "display: none" menü divum var. Menü görüntülendiğinde, div içindeki içerik gerektiği gibi görüntülenir. Sorun, ekran dışı içeriğin içinde. Div içeriği kaydırıldığında, artık görüntü alanı içinde olan ekran dışı içerik, kaydırma tamamen durdurulana kadar hiç görünmeyecektir. Bu bir yükleme sorunu değil, çünkü tüm içerikler zaten yüklendi ve bu, yukarı kaydırdığınızda bile gerçekleşmeye devam ediyor.

Bu, aslında sayfada bulunan içerikle, yalnızca gizli menü divs'ında yüklenen içerikle gerçekleşmez. Özel kodlama veya herhangi bir şey kullanmıyorum, sadece standart css ve jquery .click işlevi. Bunu düzeltmek için düşünebildiğim her yöntemi denedim. div içinde kaydırma yerine gerçek sayfa kaydırma içerik görüntüleme sorununu sabit kullanarak, ama nedense o ivme ile kaydırma olmaz ve gizli div kendisi belki 2 saniye gibi daha uzun görünmesini olması gerekenden daha alacağını hangi elbette asla iyi ol.

Bunu nasıl düzeltebilirim?

Düzenleme - Kod aşağıda:

CSS

#menu { 
width:720px; 
height:100%; 
overflow:auto; 
-webkit-overflow-scrolling:touch; 
background-color:#000000; 
display:none; 
position:absolute; 
z-index:9997; 
} 
#main-menu { 
width:100%; 
display:none; 
background-color:#000000; 
} 

<div id="menu"> 
<div id="main-menu"> 

<a href="#templates/my-account.php" class="close"> 
<div id="menu-item"> 
    <img src="images/menu-account.png" /> 
    <div id="menu-shadow"></div> 
    <div id="menu-item-title"><div class="menu-item-title">Account Settings</div></div> 
</div> 
</a> 

<a href="#templates/my-account.php" class="close"> 
<div id="menu-item"> 
    <img src="images/menu-account.png" /> 
    <div id="menu-shadow"></div> 
    <div id="menu-item-title"><div class="menu-item-title">Account Settings</div></div> 
</div> 
</a> 

<a href="#templates/my-account.php" class="close"> 
<div id="menu-item"> 
    <img src="images/menu-account.png" /> 
    <div id="menu-shadow"></div> 
    <div id="menu-item-title"><div class="menu-item-title">Account Settings</div></div> 
</div> 
</a> 

<a href="#templates/my-account.php" class="close"> 
<div id="menu-item"> 
    <img src="images/menu-account.png" /> 
    <div id="menu-shadow"></div> 
    <div id="menu-item-title"><div class="menu-item-title">Account Settings</div></div> 
</div> 
</a> 

</div> 
</div> 

<div id="wrapper"> 
    <div class="content-loading"></div> 
    <div class="contentarea"> 
     <div class="content pageURL"></div> 
    </div> 
</div> 

<div id="btn-menu" class="bar-button"><img src="images/bar-btn-menu.png" /></div> 

JQuery

<script type="text/javascript"> 
$('#btn-menu').click(function(){ 
    $("#menu").show(); 
    $("#main-menu").show(); 
    $("#bottom-bar-close").show(); 
}); 
</script> 
+0

kodunu ve sorunun bir örnek bir bağlantı verin. Kodu ve sonucu ya görselleştirmek ve görselleştirmek için bir acıdır. –

+0

Çerçeveli sayfalar iOS'ta, diğer öğeler gibi kaydırma gibi elastik tipte kaydırma yapmaz. Size yardımcı olması için bazı kod parçasını sağlamanız gerekiyor. –

+0

Kodu yakında yayınlayacağız. Sayfa çerçeveli değil, sadece gizli bir div ve uygulama için ajax kullanıyorum, bu yüzden hepsi bir sayfada. – CoreyRS

cevap

6

bunu çözdü HTML, ve böyle bir okul hatadır ama gerçek olmasına sebep oluyor can sıkıcı bir sorun. Ana menü div "konum: göreli" olarak ayarlanmış DEĞİLDİR; Bazı sebeplerden dolayı ekran dışı içeriğin yalnızca görüntü alanı içinde görüntülenmesi ve kaydırma işleminin tamamen durması sağlandı. Bu, masaüstü tarayıcılarda gerçekleşmiyor, bu yüzden problemi bu kadar uzun buluyordu ve eğer bir nedenden ötürü başka bir sayfadaki bir div üzerinde göreceli bir konum belirlemediysem, çözümün karşısına bile gelmemiştim.

Neyse, sorun çözüldü.

+0

katılan –

+0

Rica ederim dostum. – CoreyRS

+0

bu hala büyük bir yardım! Teşekkürler – user801745

İlgili konular