Question

如果您在此处观看视频：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>之上。

请注意，这只发生在桌面上的Safari / Chrome中。 iPad上的Safari和桌面上的Firefox工作正常。

谢谢！安德鲁

编辑FIX：

所以显然在sidenav元素中添加z-index：10（或任何z-index）可以解决问题。有些人要求我的整个css，所以我编辑了帖子以包含它。我不确定为什么z-index修正了这个问题，我很想知道为什么。我仍然向任何可以解释的人提供我的赏金。谢谢！

Answer 1

所以显然在sidenav元素中添加z-index：10（或任何z-index）可以解决问题。有些人要求我的整个css，所以我编辑了帖子以包含它。我不确定为什么z-index修正了这个问题，我很想知道为什么。我仍然向任何可以解释的人提供我的赏金。谢谢！

Answer 2

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

这篇文章详细说明： Using only CSS, show div on hover over <a>

这样，如果您在鼠标离开列表元素时隐藏箭头，当列表向左滑动页面时，将不会留下任何箭头。

Answer 3

从你给它的标记看起来像“隐藏”这个类也会带你的'nav'div（它在sidenav里面） - 我想这会引起一些古怪的

根据经验

标记内容
样式上升
添加互动（点击事件和行为）
然后添加你最后的互动糖果（缓和等）

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

Answer 4

有时候这会有效：让父position:relative就像webkit的旧版ie haslayout bug一样。

Answer 5

通过从父级删除z-index样式并将z-index大于0赋予fixed元素来修复它。希望这适用于其他人。

桌面webkit（safari / chrome）中的奇怪渲染错误，具有绝对定位的元素

5 个答案: