在这个CSS动画中导致绘画事件的原因是什么？

Question

我正在构建基于Smooth as Butter: Achieving 60 FPS Animations with CSS3的动画菜单。

我比较我的代码的规范演示是：http://codepen.io/Onyros/pen/jAJxkW

这是我的演示代码：

＆＃13;

＆＃13;

var navLayer = document.querySelector('.nav-layer'),
    open = document.querySelector('.open'),
    close = document.querySelector('.close');

function toggleNav() {
  navLayer.classList.add('nav-layer__animating');
  if (navLayer.classList.contains('nav-layer__visible')) {
    navLayer.classList.remove('nav-layer__visible');
  } else {
    navLayer.classList.add('nav-layer__visible');
  }
}

open.addEventListener('click', toggleNav, false);

close.addEventListener('click', toggleNav, false);

navLayer.addEventListener('transitionend', function() {
  navLayer.classList.remove('nav-layer__animating');
}, false);

＆＃13;

.nav-layer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 2;
  pointer-events: none;
}
.nav-layer__visible {
  pointer-events: auto;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  background-color: beige;
  height: 10vh;
  width: 100vw;
  z-index: 1;
}
.nav {
  position: relative;
  height: 100vh;
  width: 90vw;
  background-color: aquamarine;
  z-index: 3;
  transform: translateX(-91vw);
  will-change: transform;
}
.nav-layer__animating .nav {
  transition: all 300ms ease-in;
}
.nav-layer__visible.nav-layer__animating .nav {
  transition: all 300ms ease-out;
}
.nav-layer__visible .nav {
  transform: none;
}

＆＃13;

<div class="nav-layer">
  <nav class="nav">
    <button class="close">Close</button>
  </nav>
</div>

<header class="header"><button class="open">Menu</button></header>

<article>
  <p>O hai</p>
</article>

＆＃13;

＆＃13;

＆＃13;

当我在Chrome DevTools中启用使用绘画闪烁的规范演示时，我没有看到任何绘画事件。

当我运行我的演示时，当我关闭菜单时，我会看到一些油漆。

DevTools中的事件日志显示#document上有一个绘图，而nav.nav上有另一个绘图。

我在这里寻找的答案是：在规范演示中找到CSS属性，防止这种闪现。或者，也许差异在于我如何构建我的HTML。我认为JS是等价的，因此它不太可能存在。

请提供您的方法！