From e3f34c97a781e0c6cc7342945e2f12ad11296d14 Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Thu, 20 Aug 2015 13:04:26 +0100 Subject: [PATCH] Fix flickering autonav animation - use `transition: left` instead of `transform: translate3d` - fixes issue where translate3d moves the element immediately then animates resulting in invisible hit areas that cause unexpected hover behaviour whilst animation is in progress - translate3d is sometimes faster as it doesn't need to constantly re-calculate layout, however in this case the element is positon:absolute and we're only animating opaque elements so the benefit is marginal. Tested on Late-2012 13" retina MBP and framerate was consistently 100fps or higher. --- core/client/app/styles/layouts/main.css | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/core/client/app/styles/layouts/main.css b/core/client/app/styles/layouts/main.css index fd1edd6046..4ca9e051d7 100644 --- a/core/client/app/styles/layouts/main.css +++ b/core/client/app/styles/layouts/main.css @@ -289,13 +289,11 @@ .gh-autonav .gh-nav { position: absolute; top: 0; - left: 0; + left: -220px; z-index: 1000; width: 235px; height: 100%; - transition: transform 0.20s; - /* translate3d for GPU accelerated animation - http://bit.ly/1EY1Xhx */ - transform: translate3d(-220px,0,0); + transition: left 0.20s; } /* THE FUTURE: Super sexy background blur for Webkit - http://cl.ly/b1rG */ @@ -310,8 +308,8 @@ /* Bring it back on hover */ .gh-autonav .gh-nav.open { - transition: transform 0.15s; - transform: translate3d(0,0,0); + left: 0; + transition: left 0.15s; } /* Move main content over for the closed-nav trigger bar */