Rendering bug in Google Chrome at certain window widths

Question

My users and I are running into a rendering glitch in Chrome only (on both Windows and Mac) where an overlaid div that I'm using for on-hover tooltip-style "popouts"(see first image below) does not get rendered properly in certain cases (see second image below). In all other browsers I've tested, it works as expected.

Here's how the hover popouts are supposed to look (and what happens in Firefox, Safari, IE):

Here's what happens in Chrome:

You can see it in action on this site if you look at May 24 using a browser window width of ~ 1200px (significnatly wider or narrower windows do not seem to work). The glitch only affects the popouts in the bottom right of the menu that are popping left, e.g. those on May 24. Hovers using the same exact mechanism higher up in the page work just fine. Glitched popouts are invisible (except for part of the carat), but if you click on the link to lock the popout in place and then hold left click while moving your mouse around as if to "select text" in the area where the popout should be, it will then render partially. Also if I open dev tools and try to select the popout, it will render just fine at that point.

I've been looking at this all day and trying different work arounds with opacity, z-index, etc. and getting nowhere. Does this glitch ring any bells for anyone? Is there a way to force Chrome to render the div, once its been positioned and unhidden? I'm fine with any work-around or hack.

I use a custom (and fairly complicated) jquery plugin for popouts. If it would be helpful to see the non-minified javascript for the plugin, I can post or provide a link to that, but general guidance that leads me to a work around will be sufficient to be accepted as an answer.

Edit: My Browser Build: 26.0.1410.65

Answer 1

^{(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.

Answer 2

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.