javascript 具有绝对定位元素的桌面 webkit（safari/chrome）中的奇怪渲染错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10522054/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Weird rendering bug in desktop webkit (safari/chrome) with absolutely positioned elements
提问by andrewpthorp
If you look at the video here: http://f.cl.ly/items/2g1a2B3G312D0x0G353W/Render%20Bug%202.mov- you will see the problem in action. Basically, I have something along the following:
如果您在此处查看视频：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 is absolutely positioned, like this:
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;
}
I have the following jQuery:
我有以下 jQuery：
$("#tab").click(function(){
$("#sidenav").toggleClass("hidden");
});
However, the elements inside of the section aren't keeping up with the animation. Whenever I click, they either lag behind or don't move at all. However, they are just ghosts, I can't click them. When I bring the side nav back out, they usually catch up, but sometimes they are broken until I hover over the <li>'s.
但是，该部分内的元素跟不上动画。每当我点击时，它们要么落后，要么根本不动。然而，它们只是鬼魂，我无法点击它们。当我将侧面导航带回来时，它们通常会赶上，但有时它们会坏掉，直到我将鼠标悬停在<li>'s 上。
Keep in mind, this only happens in Safari/Chrome on the desktop. Safari on the iPad and Firefox on the desktop are working fine.
请记住，这只发生在桌面上的 Safari/Chrome 中。iPad 上的 Safari 和桌面上的 Firefox 运行良好。
Thanks! Andrew
谢谢！安德鲁
EDIT WITH FIX:
编辑修复：
So apparently adding z-index: 10 (or any z-index) to the sidenav element fixed the problem. Some people were asking for the entirety of my css, so I edited the post to contain it. I'm not sure exactly why z-index fixed this, and I'd love to know why. I'm still offering my bounty to whomever can explain that. Thanks!
所以显然将 z-index: 10 （或任何 z-index）添加到 sidenav 元素解决了这个问题。有些人要求我的整个 css，所以我编辑了帖子以包含它。我不确定为什么 z-index 修复了这个问题，我很想知道为什么。我仍在向任何可以解释这一点的人提供我的赏金。谢谢！
采纳答案by andrewpthorp
So apparently adding z-index: 10 (or any z-index) to the sidenav element fixed the problem. Some people were asking for the entirety of my css, so I edited the post to contain it. I'm not sure exactly why z-index fixed this, and I'd love to know why. I'm still offering my bounty to whomever can explain that. Thanks!
所以显然将 z-index: 10 （或任何 z-index）添加到 sidenav 元素解决了这个问题。有些人要求我的整个 css，所以我编辑了帖子以包含它。我不确定为什么 z-index 修复了这个问题，我很想知道为什么。我仍在向任何可以解释这一点的人提供我的赏金。谢谢！
回答by vaporsyndicate
I would prefer to post this as a comment, but since I'm a newbie here, my only option is posting this as an answer. In the video example you posted the hover over the list elements allowed for the display of the arrows, but they did not go away on mouse out. If you are trying to do this purely with css and not have the latent images, you should use hover.
我更愿意将此作为评论发布，但由于我是这里的新手，我唯一的选择是将其发布为答案。在视频示例中，您将鼠标悬停在允许显示箭头的列表元素上，但它们并没有在鼠标移开时消失。如果您尝试纯粹使用 css 执行此操作并且没有潜在图像，则应使用悬停。
That is detailed in this post: Using only CSS, show div on hover over <a>
在这篇文章中有详细说明： 仅使用 CSS，在悬停在 <a> 上时显示 div
That way, if you hide the arrows as the mouse leaves the list element, there will not be any arrow to stay behind when the list slides off the page to the left.
这样，如果您在鼠标离开列表元素时隐藏箭头，则当列表向左滑出页面时，将不会留下任何箭头。
回答by Rob Sedgwick
from the markup you have given it looks like the class"hidden" will also take your 'nav' div with it (it is inside sidenav ) - I imagine that would cause some quirky
从您给出的标记来看，“隐藏”类也将带上您的“导航”div（它在 sidenav 内）-我想这会导致一些古怪
As a rule of thumb
根据经验
- markup the content
- style up
- add the interactions ( click events and behaviours )
- THEN add your final interaction candy ( easing etc )
- 标记内容
- 风格化
- 添加交互（点击事件和行为）
- 然后添加您的最终交互糖果（缓动等）
( doing this you should identify which part is causing the problem in the ui )
（这样做您应该确定哪个部分导致了 ui 中的问题）
回答by Fresheyeball
Sometimes this works: make the parent position:relativeits like webkit's version of the old ie haslayout bug.
有时这是有效的：使父级position:relative成为旧 ie haslayout 错误的 webkit 版本。
回答by user2067655
Fixed it by removing the z-index style from the parent and giving a z-index higher than 0 to the fixed element. Hope this works with others.
通过从父元素中删除 z-index 样式并为固定元素提供高于 0 的 z-index 来修复它。希望这适用于其他人。
