固定导航上的 CSS 剪辑/剪辑路径在 Chrome 和 IE 中不合作

Posted

技术标签:

【中文标题】固定导航上的 CSS 剪辑/剪辑路径在 Chrome 和 IE 中不合作【英文标题】:CSS clip/clip-path on fixed navigation not cooperating in Chrome and IE 【发布时间】:2015-04-07 02:44:07 【问题描述】:

我正在尝试使用 CSS clipclip-path 属性来显示单页网站布局的浮动寻呼机导航。我试图让导航根据它是在深色还是浅色背景上更改颜色。你可以在http://dannymcgee.net/redesign 看到 Firefox 中的预期结果。我还在http://dannymcgee.net/dev/clipnav-prototype/ 复制了导航和容器,代码更简洁、更轻量级,用于故障排除。

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

<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 中正常工作(实际上,我在 an old *** thread 上找到了我无法评论的链接),所以我知道这是可能的,我只是想不通他们在做什么不同。如果我能找到某种 shim javascript 或 jQuery 解决方案,我会非常满意,但这似乎是一个非常不寻常的案例场景,我什至不知道从哪里开始寻找。

【问题讨论】:

很奇怪,Chrome 和 Firefox 都打开了,看不到问题。但是,我使用的是 OS X。 感谢史蒂夫提供的信息,我目前没有要测试的 Mac。需要明确的是,导航是否保持可交互性(即,您可以将鼠标悬停在导航元素上并且它们会适当地动画)即使在滚动经过顶部之后? 有趣!交互在 FireFox 上完全没问题,但是在 Chrome 上,导航元素不会动画或像最后两个部分(联系人和关于)上的链接一样。我会尝试一些属性,看看是否有任何解决方法。 我找不到任何东西,但我确实注意到 Bella Fuchsia 网站中的标记在每个导航副本中使用完全相同的元素。您是否在代码中尝试过这种方法? 是的。上面的“重新设计”链接写得有点草率(因为我并没有真正提前计划),但我确实为我重建的原型中的每个部分/clipper/nav 使用了完全相同的标记:dannymcgee.net/dev/clipnav-prototype 仍然没有骰子,很遗憾! 【参考方案1】:

经过一些广泛的故障排除后,我已经解决了这个问题。基本上,clip 和/或clip-path 在 Chrome 和 IE 中非常脆弱。大多数问题是由在固定的nav 内定位元素引起的。一旦我删除了.nav 中所有内容的所有position 声明,它的功能基本上与Chrome 中的预期相同。 IE 可能是一个失败的原因,所以我必须为它设计一个后备。

警告:对 .clipper 内的任何内容应用 CSS3 转换似乎会破坏 Chrome 中第三个 sectionbackground-attachment: fixed。不知道为什么,但只要为 Chrome 禁用这些效果就很容易了。

【讨论】:

clip-path 在 IE 中根本不起作用,所以这是原因之一(不支持)。 caniuse.com/#feat=css-clip-path【参考方案2】:

对我有用的是创建一个仅用于剪辑部分(在本例中为标题)的类。

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

然后,使用 jquery 和 waypoints 删除了 clip-path 类,绕过了问题:

$(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 */
      );
);

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

【讨论】:

以上是关于固定导航上的 CSS 剪辑/剪辑路径在 Chrome 和 IE 中不合作的主要内容,如果未能解决你的问题,请参考以下文章

如何在检查 CSS 位置后解决 Safari 9.1 转换剪辑路径的问题?

如何使用 CSS 剪辑路径剪辑画布?

防止 CSS 剪辑路径剪辑儿童?

为啥带有 SVG 的 CSS 剪辑路径在 Safari 中不起作用?

当引用为 css 剪辑路径属性时,SVG 剪辑路径的位置不正确

如何使用 CSS 在两个图像之间创建剪辑路径 [关闭]