Rendering bug in Google Chrome at certain window widths

^{(Per my comments)}

This does indeed seem to be a bug in Chrome, though without a smaller test case to reproduce it, it could be very hard to track down. You may want to report it to the Chrome team with as much information as possible.

In support of my "it's a bug" assertion:

• The hidden/clipped elements become visible when they are selected.
• The elements underneath the hidden/clipped elements are not clickable.
• This indicates that z-index and height is correct.
• It only happens under very specific circumstances; the rest of the items with the same style work fine. The same item may work fine at a slightly bigger/smaller screen width.
• Applying a 3D transform fixes it.

The problem goes away when I apply a CSS transform such as scale3d or translate3d. I imagine this is because certain CSS properties cause the browser to switch to GPU acceleration.

In this case, switching to the fast path for rendering seems to alter the drawing sequence enough to fix the problem.

Super hacky but this fixes it for me:

$('.drop-link.food').on('hover',function() {  $('.tool-tip').css('overflow', 'hidden').height();  $('.tool-tip').css('overflow', 'auto');});

Obviously this isn't a "good" solution, and even remaining hacky you could probably optimize it to only force the redraw on the tooltip it needs to, but hopefully it helps...

Another clue:

$('.drop-link').on('hover',function() {  $(this).siblings('.tool-tip').css('display','block');});

This won't fix it right away, but it seems like if this is there, once you've hovered on something, it will work the next time you hover on it.

Not sure if this helps with your situation, but over the last couple of days I've started to notice that certain site elements on Facebook and Weight Watchers no longer show up. Specifically it seems to be affecting items that (I believe) to be controlled by or dependent on Javascript. When I call up these sites in Firefox and Safari they work as expected.