css - 如何停止移动导航上 "Flickering"的 CSS 转换

Question

我创建了一个 Codpen Pen显示我遇到的问题。当您根据媒体查询调整浏览器大小时，在这种情况下 <600px，您会看到“切换”关闭 Canvas 移动导航的闪光，这使得调整大小时变得笨拙并且用户体验不佳。

问题是第 28 行的转换:

@include transition(all .25s linear);

如果我删除该行，它会解决所有问题，但会删除违背移动导航目的的过渡(它将平滑的导航变成我不想要的笨拙的东西)。我怎样才能解决这个问题？我已经尝试过:

-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;

如果有任何帮助，我将不胜感激!

Answer 1

演示 - http://codepen.io/anon/pen/vEXaVP

而不是使用 transform:translateX 使用 left

.sliding-menu-content {
    left:-220px;
}

&.is-visible {
    left:0px;
}