Question

You can look at the code in question at: https://test.fuzebox.com

Greetings!
I ran across a problem this morning that I’ve never seen before. We have a set of dropdown menus in our global nav. When you mouse over them, they drop "over" the large blue bar. In Chrome (Win/Mac) the drop down leaves an "impression" on the color of the blue gradient bar. The problem does not occur if you remove the gradient and just use a solid background color. I tried pushing some stuff "back" with z-indexes to no avail. My googling turned up nothing about this type of problem. Below are before and after images.

The DIVs in play are:

• #fuze-home-blue-bar
• #fuze-home-blue-bar-bkgnd

and the nav dropdown XPath is:

/html/body[@class='template-document_view portaltype-document site-FuzeBox section-technology icons-on content-id-mobile']/div[@id='wrapper']/div[@id='fuzeportal-top']/div[@id='fuzeportal-header']/ul[@id='portal-globalnav']/li[@id='portaltab-technology']/ul[@class='submenu']/li[1]

Before

After

Any suggestions are appreciated. Doesn’t occur in any other browser/OS combo.

Answer 1

sometimes Chrome’s hardware acceleration changes colors slightly. Try this fix… it’s magic.

#fuze-home-blue-bar {
   -webkit-transform: translateZ(0);
}