1

I'm attempting to use the CSS clip and clip-path properties to display a floating pager nav for a single-page website layout. I'm trying to get the nav to change colors based on whether it's on a dark or light background. You can see the intended result in Firefox at http://dannymcgee.net/redesign. I've also duplicated the nav and containers with cleaner, lighter-weight code at http://dannymcgee.net/dev/clipnav-prototype/ for troubleshooting purposes.

This is the way the markup is structured for each section with a different background color:

<section>

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

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

</section>

This entire section is repeated every time the background changes. Each section is relatively positioned. The .clipper is styled like so:

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

The .nav inside the clipper is position: fixed from the top of the page and has backface-visibility: hidden.

The effect works basically exactly as I'd like it to in Firefox, but is buggy in Chrome and IE. In Chrome, the background images act strangely, and the nav isn't interactable past the first section. In IE, the nav simply doesn't appear at all past the first section. I've seen this exact same setup working correctly in Chrome and IE here (actually, I found the link on an old StackOverflow thread that I can't comment on), so I know it's possible, I just can't figure out what they're doing differently. I'd be pretty satisfied using some sort of shim Javascript or jQuery solution if I could find one, but this seems like a pretty unusual case scenario and I'm not even sure where to begin to look.

Community
  • 1
  • 1
dannymcgee
  • 621
  • 2
  • 9
  • 16
  • Very strange, I have both Chrome and Firefox open and cannot see the issue. I'm using OS X, however. – Steve Apr 07 '15 at 03:03
  • Thanks for the info, Steve, I don't currently have a Mac to test on. To be clear, does the nav remain interactable (i.e., you can hover over the nav elements and they animate appropriately) even after scrolling past the top section? – dannymcgee Apr 07 '15 at 05:41
  • Interesting! Interaction is totally fine on FireFox, however on Chrome, the nav elements do not animate or act like links on the last two sections, Contact and About. I'll play around with some properties and see if anything yields a fix. – Steve Apr 07 '15 at 05:49
  • I couldn't find anything but I did notice the markup in the Bella Fuchsia site uses the exact same elements across each copy of the navigation. Have you tried that approach in your code? – Steve Apr 07 '15 at 06:16
  • Yes. The "redesign" link above is written sort of sloppy (because I didn't really plan ahead), but I did use exactly the same markup for each section/clipper/nav in the prototype that I rebuilt: http://dannymcgee.net/dev/clipnav-prototype/ Still no dice, unfortunately! – dannymcgee Apr 07 '15 at 15:50
  • I'm thinking if I can put a single, invisible nav on top of the the whole everything, and write a simple jQuery script to make them all animate the same way when the invisible nav is hovered, that could potentially solve my interactivity issue. But there's still the issue of the `background-attachment: fixed;` being wonky when you start to scroll past the yellow section: http://dannymcgee.net/dev/clipnav-prototype/ – dannymcgee Apr 07 '15 at 16:05
  • Aha! The `background-attachment` wonky-ness is caused by having elements inside the clipped .nav with `position` values set. When I remove those `position` declarations, the backgrounds work fine. Getting somewhere! – dannymcgee Apr 07 '15 at 16:39

2 Answers2

1

After some extensive troubleshooting, I've solved the problem. Basically, clip and/or clip-path are really fragile in Chrome and IE. Most of the problems were being caused by having positioned elements inside the fixed nav. Once I removed all position declarations for everything inside the .nav, it functioned mostly as intended in Chrome. IE is probably a lost cause, so I'll have to design a fallback for it.

Caveat: applying CSS3 transforms to anything inside the .clipper seems to break the background-attachment: fixed for the third section in Chrome. No idea why, but it'll be easy enough to just disable those effects for Chrome.

dannymcgee
  • 621
  • 2
  • 9
  • 16
  • clip-path doesn't work at all in IE so that's one reason (not supported). http://caniuse.com/#feat=css-clip-path – Rob Apr 07 '15 at 20:54
0

What worked for me is creating a class for the sole purpose of cliping the section (in this case the header).

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

Then, using jquery and waypoints removed the clip-path class, bypassing the problem:

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

You could also remove bg image by creating another class to set bg image opacity to 0 and adding it to your header on scroll for a smoother feel.

Dimitris Patiniotis
  • 1