CSS clip/clip-path 固定导航在 Chrome 和 IE 中不兼容

Question

我正在尝试使用 CSS clip 和 clip-path 属性为单页网站布局显示浮动寻呼机导航。我试图让导航根据它是在深色还是浅色背景上改变颜色。您可以在 http://dannymcgee.net/redesign. I've also duplicated the nav and containers with cleaner, lighter-weight code at http://dannymcgee.net/dev/clipnav-prototype/ 查看 Firefox 中的预期结果以进行故障排除。

这是为具有不同背景颜色的每个部分构建标记的方式：

<section>

  <div class="clipper">
    <ul class="nav">
      ...
    </ul>
  </div>

  <article class="content">
    ...
  </article>

</section>

每次背景变化时都会重复整个 section。每个section都是相对定位的。 .clipper 的样式如下：

position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 300px;
clip: rect(auto,auto,auto,auto);
clip-path: inset(0 0 0 0);

剪辑器中的 .nav 从页面顶部算起 position: fixed 并且有 backface-visibility: hidden.

效果基本上完全符合我在 Firefox 中的预期效果，但在 Chrome 和 IE 中存在问题。在 Chrome 中，背景图像表现得很奇怪，并且导航在第一部分之后不可交互。在 IE 中，导航根本不会出现在第一部分之后。我已经看到这个完全相同的设置在 Chrome 和 IE here (actually, I found the link on an old Whosebug thread 中正常工作，我无法评论），所以我知道这是可能的，我只是无法弄清楚他们在做什么不同的。如果我能找到某种垫片 Javascript 或 jQuery 解决方案，我会非常满意，但这似乎是一个非常不寻常的案例场景，我什至不确定从哪里开始看.

Answer 1

经过广泛的故障排除后，我已经解决了问题。基本上，clip and/or clip-path 在 Chrome 和 IE 中真的很脆弱。大多数问题是由于在固定 nav 内定位元素引起的。一旦我删除了 .nav 中所有内容的所有 position 声明，它的功能大部分都符合 Chrome 中的预期。 IE 可能是一个失败的原因，所以我必须为它设计一个后备。

警告：将 CSS3 转换应用于 .clipper 内的任何内容似乎会破坏 Chrome 中第三个 section 的 background-attachment: fixed。不知道为什么，但只需禁用 Chrome.

的这些效果就足够容易了

Answer 2

对我有用的是创建一个 class，其唯一目的是剪辑该部分（在本例中为 header）。

.clip-path-header {
    clip-path: polygon(0 0, 100% 0, 100% 80vh, 0 100%);
}

然后，使用jquery和waypoints去掉clip-pathclass，绕过问题：

$(document).ready(function() {
      $('.js--first-section').waypoint(function(direction) {
          if (direction == "down") {
              $('nav').addClass('sticky');
              $('header').removeClass('clip-path-header');
          } else {
              $('nav').removeClass('sticky');
              $('header').addClass('clip-path-header');
          }
      },{
          offset:'60px;' /* or your preferred offset */
      });
});

您还可以通过创建另一个 class 将背景图像不透明度设置为 0 并将其添加到您的 header 滚动以获得更平滑的感觉来删除背景图像。

CSS clip/clip-path 固定导航在 Chrome 和 IE 中不兼容

CSS clip/clip-path on fixed navigation not cooperating in Chrome and IE

html

css

google-chrome

clip

clip-path