diff --git a/ui (gen4)/index.html b/ui (gen4)/index.html
index 26ad889d..5caf204e 100755
--- a/ui (gen4)/index.html	
+++ b/ui (gen4)/index.html	
@@ -31,12 +31,16 @@
 	overflow: visible;
 	width: auto;
 	height: auto;
+
 	background: black;
 
 	-webkit-transition: all 0.1s ease-in;
 	-moz-transition: all 0.1s ease-in;
 	transition: all 0.1s ease-in;
 }
+.shadow .image {
+	transform-origin: 0 0;
+}
 .image.moving {
 	visibility: hidden;
 }
diff --git a/ui (gen4)/ribbons.js b/ui (gen4)/ribbons.js
index b526ac78..acf6989a 100755
--- a/ui (gen4)/ribbons.js	
+++ b/ui (gen4)/ribbons.js	
@@ -314,22 +314,29 @@ module.RibbonsPrototype = {
 	},
 
 	// XXX make this work for multiple targets...
-	// XXX avoid ardcoded delays...
+	// XXX avoid hardcoded delays...
 	makeShadow: function(target, animate){
 		var img = this.getImage(target)
 		var gid = this.getElemGID(img)
+		var s = this.getScale()
 		var shadow = $('<div>')
-			.addClass('shadow')
-			.append(img
-					.clone()
-					.removeClass('current')
-					.attr('gid', null))
-			.css(img.offset())
+				.addClass('shadow')
+				.append(setElementScale(
+					img
+						.clone()
+						.removeClass('current')
+						.attr('gid', null), s))
+				.css({
+					width: img.width()*s,
+					height: img.height()*s,
+				})
+				.css(img.offset())
 			.appendTo(this.viewer)
 		img.addClass('moving')
 		var that = this
 
 		return function(){
+			var s = that.getScale()
 			var img = that.getImage(gid)
 			if(animate){
 				shadow.css(img.offset())