20

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!

andrewpthorp
  • 4,998
  • 8
  • 35
  • 56
  • 1
    have you tried doing the sliding using jquery instead of css3? this could be css3 support bug kind of thing. If you have not tried that I would suggest to go that route for now – Huangism May 09 '12 at 18:39
  • I want to avoid jQuery for this, because CSS3 animations are sprinkled throughout and are much more efficient. – andrewpthorp May 09 '12 at 18:45
  • well efficient as it might be, you still got this problem. can you give the code/css for the arrows? maybe you need to put the animation on them as well if they are positioned differently (not static) – Huangism May 09 '12 at 18:56
  • This is just a guess, but might the position of the `
      ` element (and its contents) be **static**? Have you tried setting `position:relative` on `
        ` and `
      • `s? Regardless, it seems like a rendering bug.
     – inhan May 14 '12 at 01:39
  • No, they are purely left on the screen. I can't interact with them and when I inspect them they aren't actually there. – andrewpthorp May 14 '12 at 03:47
  • Sounds like a css3 support bug to me. In my opinion swap to jQuery (for backwards compatibility with older browsers) – Undefined May 14 '12 at 06:32
  • Could you post some more of your code? Maybe you could make a fiddle on jsfiddle.net to recreate the error? – yunzen May 15 '12 at 19:32
  • yeah it looks like a bug to me. – ansiart May 17 '12 at 19:31
  • I would nearly bet this is a CSS positioning misdeclaration. Please post the complete CSS of the section all elements within that section. What you posted is not enough. – Petr Vostrel May 18 '12 at 10:55
  • Could you post the CSS for `#tab` please, perhaps there is also some like `#sidenav .hidden #tab` which I would assume is the issue or infact `#sidenav .hidden` should be `#sidenav.hidden` – Bloafer May 18 '12 at 14:21
  • Webkit uses z-index when doing transitions, right? Imagine if you have two elements on a different z-index that animate toward one another. Should they passthrough or block? – Todd Baur May 19 '12 at 15:41
  • I did some research and found http://css3pie.com/forum/viewtopic.php?f=6&t=2062 which says you can use `-pie-poll:true;' Tell me if this helps anyone. – www139 Feb 06 '16 at 15:27

5 Answers5

14

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!

andrewpthorp
  • 4,998
  • 8
  • 35
  • 56
  • 1
    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. – Mike Grace Oct 10 '12 at 17:42
  • I used `z-index: 1;` and it worked perfectly, what an odd fix. – Sam Beckham Oct 21 '13 at 21:17
  • 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 `
  • `'s is transparent. This makes no sense to me. I suspect a bug.
    • – Andre Bulatov Oct 26 '16 at 21:31