From 4491995fad2ec422d86acf7a05fa90f3f8ff5e93 Mon Sep 17 00:00:00 2001 From: Aaron Boodman Date: Wed, 8 Jan 2014 02:00:24 -0800 Subject: [PATCH] Fix the weird flicker on mouseover of thumbnails. The effect you were seeing was a difference between hardware and software compositing paths. Chrome was promoting the content area to a hardware-accelerated layer during animation, but dropping it back to software after the animation was complete. There were little animations for the checkmarks that were causing us to flip in and out of hardware mode as you moused around. Solution: force us to stay in hardware mode the entire time the nav is open (translate: scale3d() is a well-known way to do this). Bonus: the scaled text rendering looks better in hardware mode. BUG: https://code.google.com/p/camlistore/issues/detail?id=284 Change-Id: I62f6c86d1ae12ba043f34c0659633bb5195dc50c --- server/camlistored/ui/blob_item.css | 3 +++ server/camlistored/ui/index.js | 5 +++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/server/camlistored/ui/blob_item.css b/server/camlistored/ui/blob_item.css index 1ad2be854..7a2328df8 100644 --- a/server/camlistored/ui/blob_item.css +++ b/server/camlistored/ui/blob_item.css @@ -141,6 +141,9 @@ limitations under the License. top: 5px; transition: opacity 0.2s ease; width: 25px; + + /* To force us into a graphics layer, otherwise we get weird effects as we transition in and out of one during animation. See: https://code.google.com/p/camlistore/issues/detail?id=284. */ + -webkit-transform: scale3d(1, 1, 1); } .cam-blobitem.goog-control-disabled .checkmark { diff --git a/server/camlistored/ui/index.js b/server/camlistored/ui/index.js index 7f01edd57..54ebe44c9 100644 --- a/server/camlistored/ui/index.js +++ b/server/camlistored/ui/index.js @@ -97,8 +97,9 @@ cam.IndexPage.prototype.setTransform_ = function() { var originY = currentHeight * currentScroll / potentialScroll; goog.style.setStyle(this.blobItemContainer_.getElement(), - {'transform': goog.string.subs('scale(%s)', scale), - 'transform-origin': goog.string.subs('right %spx', originY)}); + // The 3d transform is important. See: https://code.google.com/p/camlistore/issues/detail?id=284. + {'transform': goog.string.subs('scale3d(%s, %s, 1)', scale, scale), + 'transform-origin': goog.string.subs('right %spx 0', originY)}); }; cam.IndexPage.prototype.onNavClose = function() {