Weird rendering bug in desktop webkit (safari/chrome) with absolutely positioned elements

Question

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:

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

$("#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.

Keep in mind, this only happens in Safari/Chrome on the desktop. Safari on the iPad and Firefox on the desktop are working fine.

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!

Solution 1

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!

Solution 2

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

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 )

Solution 3

Sometimes this works: make the parent position:relative its like webkit's version of the old ie haslayout bug.

Solution 4

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.

That is detailed in this post: Using only CSS, show div on hover over <a>

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.

View more solutions

Comments

[andrewpthorp]

I want the arrow there the whole time. It is simply absolutely positioned to the right of the <li>. The fact that it is jumping around shouldn't be happening :(

[xiaoyi]

@andrewpthorp, how about try to use float:right instead of left: for buttons?

[Petr Vostrel]

Yes, I agree. You are setting "hidden" class on the #sidenav, but your CSS applies the hidden position to children of #sidenav, not #sidenav itself.

[andrewpthorp]

Whoops, that was just a mistake in my pasting my code. I'm using SASS and I converted it to standard CSS for this question. It should have read #sidenav.hidden

[Mike Grace]

OH MY GOSH!!! Thank you!!!!! I've been banging my head for hours now trying to figure out why my app was working fine in IE and Firefox but messed up like you demonstrated in all webkit based browsers. Stupid that all it takes is a z-index. Gah! Thank you again.

[Sam Beckham]

I used z-index: 1; and it worked perfectly, what an odd fix.

[Andre Bulatov]

Had a different bug with weird color rendering of list item li elements' background-color on hover. when hovering on different items, portions of different size of the nav would take on a slightly different color tone than the background color that is set. REMOVING z-index from the main nav container element helped for some reason. PS: Everything else besides <li>'s is transparent. This makes no sense to me. I suspect a bug.