当项目出现在它的顶部时，Chrome 渐变会改变颜色 [英] Chrome gradient changes color when items appear over top of it

问题描述

您可以在以下位置查看相关代码:https://test.fuzebox.com

您好！今天早上我遇到了一个我以前从未见过的问题.我们的全局导航中有一组下拉菜单.当您将鼠标悬停在它们上方时，它们会越过"蓝色的大酒吧.在 Chrome (Win/Mac) 中，下拉菜单会留下印象".在蓝色渐变条的颜色上.如果您删除渐变并仅使用纯色背景色，则不会出现此问题.我试着把一些东西退回"使用 z 索引无济于事.我的谷歌搜索没有发现此类问题.以下是前后对比图.

正在使用的 DIV 是:

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

导航下拉XPath是:

/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='子菜单']/li[1]

之前

之后

任何建议表示赞赏.不会出现在任何其他浏览器/操作系统组合中.

解决方案

有时 Chrome 的硬件加速会稍微改变颜色.试试这个修复方法……这很神奇.

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

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.

解决方案

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

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

这篇关于当项目出现在它的顶部时，Chrome 渐变会改变颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！