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

@@ -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 {

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() {