CODEWITHSUNDEEP
javascriptjqueryhtmlcsswebkit
andrewpthorp
andrewpthorp

Reputation: 5096

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

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!

Upvotes: 20

Views: 16740

Answers (5)

user2067655
user2067655

Reputation: 21

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.

Upvotes: 0

andrewpthorp
andrewpthorp

Reputation: 5096

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!

Upvotes: 14

Rob Sedgwick
Rob Sedgwick

Reputation: 5226

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 )

Upvotes: 1

Fresheyeball
Fresheyeball

Reputation: 30015

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

Upvotes: 1

vaporsyndicate
vaporsyndicate

Reputation: 23

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.

Upvotes: 1

Related Questions