CSS CSS滤镜反转规则在Chrome 68上破坏固定定位

在本文中，我们将介绍CSS滤镜反转规则在Chrome 68上破坏固定定位的问题，并提供解决方法和示例说明。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

问题描述

在Chrome 68版本中，使用CSS滤镜中的invert规则可能会导致固定定位的元素无法正常显示。固定定位通常用于创建悬浮在页面上方的元素，如导航栏或分享按钮。然而，当应用了invert规则后，这些固定定位的元素可能会消失或变得不可见，给用户带来不便和困惑。

问题示例

下面的示例展示了一个固定定位的导航菜单，在应用了invert规则后导航菜单消失了。

<!DOCTYPE https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<head>
  <style>
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 50px;
      background-color: black;
      color: white;
      text-align: center;
    }
    /* 应用滤镜反转规则 */
    .nav.inverted {
      filter: invert(100%);
    }
  </style>
</head>
<body>
  <div class="nav">
    <ul>
      <li>首页</li>
      <li>关于我们</li>
      <li>联系我们</li>
    </ul>
  </div>
  <button onclick="invertNav()">切换反转</button>

  <script>
    function invertNav() {
      var nav = document.querySelector('.nav');
      nav.classList.toggle('inverted');
    }
  </script>
</body>
</html>

在此示例中，一个固定定位的导航栏被创建，并通过toggle按钮来应用或取消应用invert规则。然而，当在Chrome 68上运行此示例时，导航栏在应用invert规则后消失了。

解决方法

1. 强制硬件加速

通过在固定定位的元素上启用硬件加速，可以解决这个问题。

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: black;
  color: white;
  text-align: center;
  /* 强制硬件加速 */
  transform: translateZ(0);
}

通过在固定定位元素的样式中添加transform: translateZ(0)，可以启用硬件加速，从而解决滤镜反转规则在Chrome 68版本上破坏固定定位的问题。

2. 使用背景颜色替代滤镜

另一种解决方法是使用背景颜色来替代滤镜，以达到类似的效果。

.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: black;
  color: white;
  text-align: center;
}

.nav.inverted {
  background-color: white;
  color: black;
}

通过在.nav.inverted样式中改变背景颜色和字体颜色，可以实现类似滤镜反转的效果，避免了在Chrome 68上固定定位元素消失的问题。