特定电脑Chrome浏览器中CSS失效问题求助

问题描述 #

• 仅在Chrome浏览器中，侧边栏的SVG图标显示为黑色，而非预期的绿色（#82CD53）
• 拉取同事代码后本地出现相同问题，且访问生产环境站点时，仅两台开发电脑的Chrome存在异常，其他非开发电脑的Chrome显示正常
• 已尝试清除浏览器缓存、卸载重装Chrome，问题未解决

图标显示效果 #

正常显示的绿色图标：

异常显示的黑色图标：

示例SVG代码 #

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" class="kt-svg-icon">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <polygon id="Shape" points="0 0 24 0 24 24 0 24" />
        <path d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z" id="Path-94" fill="#000000" fill-rule="nonzero" />
        <path d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z" id="Path-94" fill="#000000" fill-rule="nonzero" opacity="0.3" transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) " />
    </g>
</svg>

相关CSS代码 #

svg {
    fill: #82CD53 !important;
}
svg:hover {
    fill: #FFAE3B !important;
}
.hover-item {
    color: #FFAE3B;
}

排查方向与解决方案 #

• 检查Chrome实验性特性：输入chrome://flags/进入设置页面，搜索"SVG"相关选项，将所有与填充规则、样式优先级相关的flag恢复为默认状态，重启浏览器后测试
• 禁用Chrome扩展：开发电脑可能安装了样式修改类、调试类扩展，尝试禁用所有扩展后访问页面，逐一排查冲突扩展
• 提升CSS选择器优先级：当前CSS仅针对svg元素，可直接指定内部path元素覆盖SVG自带的黑色填充：

  .kt-svg-icon path {
      fill: #82CD53 !important;
  }
  .kt-svg-icon:hover path {
      fill: #FFAE3B !important;
  }
  

• 清理本地开发环境缓存：清理Visual Studio缓存、TFVC本地工作区缓存，重新拉取代码后测试
• 创建新Chrome用户配置文件：卸载重装Chrome时若保留了旧配置文件，可能已损坏，创建全新用户配置文件后访问页面
• 排查系统级样式注入：关闭可能注入页面样式的系统工具、杀毒软件后测试

内容的提问来源于stack exchange，提问作者Rani Radcliff