有趣的移动Safari隐藏内容问题 [英] interesting mobile safari hidden content issue

问题描述

所以我在移动Safari中使用此Web应用程序时遇到了一个有趣的问题，到目前为止我还无法修复。

So this intersting problem I'm having with this web app in mobile safari that I haven't been able to fix as of yet.

我有一个 display：none菜单div出现在点击时。显示菜单时，div中的内容将按原样显示。问题出在屏幕外的内容之内。滚动div内容时，直到完全停止滚动，视口内的屏幕外内容才完全显示。这不是加载问题，因为所有内容实际上已经加载完毕，即使您向上滚动到顶部，这种情况仍会继续发生。

I have a "display:none" menu div that appears on click. When the menu is displayed, the content within the div displays as it should. The problem lies within the offscreen content. When the div content is scrolled, the offscreen content that is now within the viewport wont show at all until the scrolling has completely stopped. It's not a loading issue because all the content has actually loaded already, and this continues to happen even when you scroll back up to the top.

内容不会发生这种情况实际上是在页面上，只是隐藏菜单div中加载的内容。我没有使用任何特殊的编码或任何东西，只是标准的CSS和jquery .click函数。我尝试了所有可以解决的方法。使用实际的页面滚动而不是div中的滚动解决了内容显示问题，但是由于某种原因，它不会随着动量滚动，并且隐藏的div本身将花费比应显示的更长的时间，也许像2秒钟，这当然永远不会没关系。

This doesnt happen with the content that is actually on the page, just the content that is loaded within the hidden menu divs. I'm not using any special coding or anything, just standard css and the jquery .click function. I've tried every method I can think of to fix this. Using the actual page scroll instead of a scroll within the div fixed the content display issue, but for some reason it wouldnt scroll with momentum and the hidden div itself would take longer than it should to appear, maybe like 2 seconds which of course will never be okay.

有什么办法解决这个问题吗？

Any ideas how to fix this?

编辑-以下代码：

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

HTML

<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>

推荐答案

弄清楚了，这是一个小学生错误，但这确实引起了一个非常烦人的问题。主菜单div未设置为 position：relative;。由于某种原因，导致所有屏幕外内容仅在其位于视口内且滚动完全停止时才呈现。在台式机浏览器中不会发生这种情况，这就是为什么这么久才发现问题的原因，如果由于某种原因我没有在另一页的div上设置相对位置，我什至不会遇到解决方案。

Figured it out, and it's such a schoolboy mistake, but it does cause a really annoying issue. The main-menu div was NOT set to "position:relative;" which for some reason caused all off screen content to only render when it was within the viewport and scrolling had come to a complete stop. This doesnt happen in desktop browsers which is why it was so long finding the problem, and I wouldnt have even come across the solution if I didn't for some reason set a relative position on a div on another page.

反正问题解决了。

这篇关于有趣的移动Safari隐藏内容问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！