单击“页面跳转”链接时，网站的某些部分会消失

Question

I have encountered a very weird problem. Sometimes when I click page jump links, parts of the website become blank. If I hover a blank area, then all the website reappears. I can't use chrome inspect to debug this, because if I enable it everything becomes normal again.

It seems to be a Chrome bug and it only happened on two computer out of a total of 12 I tested this on.

I am currently using Chrome Version 33.0.1750.154 m

One of the pages that have this problem is here .

Here you can see a screenshot of the problem.

I have tried deleting cookies, history and cache, then tried on incognito and it still happens.

Answer 1

I've run into this also and am pretty sure it has to do with accelerated rendering in Chrome.

I typically use one of two solutions, preferring the first when it works:

1. If your markup allows, add a block-level container around the offending area. As I understand it, this creates a new layout boundary that will help define for the browser what areas need to be repainted when.

2. Use JavaScript to force a repaint in the affected area when a page jump is clicked:

   $('#page').on('click', '.jump', function() { $('#container-of-disappearing-section').hide().show(); });

That second approach isn't ideal for performance, but it's better than weird white gaps showing up on the page.

You could optimize a little further if you're already using something like Modernizr that could help you execute the script only in Chrome. But that probably wouldn't be worthwhile unless you're already doing that sort of detection for some other feature on your site.