20

如果您在此处观看视频：http: //f.cl.ly/items/2g1a2B3G312D0x0G353W/Render%20Bug%202.mov - 您将看到问题的实际效果。基本上，我有以下几点：

<section id="sidenav">
  <h1>TEXT HERE</h1>
  <ul>
    <li>Tab One</li>
    <li>Tab Two</li>
    <li>Tab Three</li>
    <li>Tab Four</li>
  </ul>
  <div id="tab"></div>
</section>

Sidenav 是绝对定位的，像这样：

#sidenav {
  position: absolute;
  top: 200px;
  left: 0px;
  width: 770px;
  padding: 30px 0px 20px;
  background: rgba(255, 255, 255, 0.85);
  -webkit-transition: left 0.75s ease-in-out;
  -webkit-backface-visibility: hidden;
  z-index: 10; /* This fixed it. */
}

#sidenav.hidden {
  left: -768px;
}

我有以下 jQuery：

$("#tab").click(function(){
  $("#sidenav").toggleClass("hidden");
});

但是，该部分内的元素跟不上动画。每当我单击时，它们要么落后，要么根本不动。但是，它们只是幽灵，我无法单击它们。当我把侧导航带回来时，它们通常会赶上来，但有时它们会坏掉，直到我将鼠标悬停在<li>'s 上。

请记住，这只发生在桌面上的 Safari/Chrome 中。iPad 上的 Safari 和桌面上的 Firefox 运行良好。

谢谢！安德鲁

编辑修复：

因此，显然将 z-index: 10 （或任何 z-index）添加到 sidenav 元素可以解决问题。有些人要我的全部 CSS，所以我编辑了帖子以包含它。我不确定 z-index 修复此问题的确切原因，我很想知道原因。我仍然向任何能解释这一点的人提供我的赏金。谢谢！

4

5 回答 5

14

因此，显然将 z-index: 10 （或任何 z-index）添加到 sidenav 元素可以解决问题。有些人要我的全部 CSS，所以我编辑了帖子以包含它。我不确定 z-index 修复此问题的确切原因，我很想知道原因。我仍然向任何能解释这一点的人提供我的赏金。谢谢！

于 2012-08-07T14:11:57.660 回答
1

我更愿意将此作为评论发布，但由于我是这里的新手，我唯一的选择是将其发布为答案。在视频示例中，您将鼠标悬停在允许显示箭头的列表元素上，但鼠标移出时它们并没有消失。如果您尝试仅使用 css 执行此操作并且没有潜在图像，则应使用悬停。

这篇文章中有详细说明： 仅使用 CSS，将鼠标悬停在 <a> 上时显示 div

这样，如果您在鼠标离开列表元素时隐藏箭头，则当列表从页面滑出左侧时，不会有任何箭头留在后面。

于 2012-05-14T06:29:31.410 回答
1

从您给出的标记来看，“hidden”类也将带走您的“nav”div（它在 sidenav 内部） - 我想这会导致一些古怪

根据经验

  • 标记内容
  • 风格化
  • 添加交互（点击事件和行为）
  • 然后添加您的最终互动糖果（缓动等）

（这样做你应该确定哪个部分导致了 ui 中的问题）

于 2012-05-15T23:42:03.197 回答
1

有时这是可行的：使父position:relative级类似于 webkit 的旧版 ie haslayout 错误。

于 2012-05-15T23:54:58.703 回答
0

通过从父元素中删除 z-index 样式并为固定元素提供高于 0 的 z-index 来修复它。希望这适用于其他人。

于 2013-04-12T11:53:18.907 回答