diff --git a/js/macros/zoomer.js b/js/macros/zoomer.js
index 637a19965..7bd484ef0 100644
--- a/js/macros/zoomer.js
+++ b/js/macros/zoomer.js
@@ -12,38 +12,60 @@ var Renderer = require("../Renderer.js").Renderer,
 	Tiddler = require("../Tiddler.js").Tiddler,
 	utils = require("../Utils.js");
 
-function startZoomer(macroNode) {
+function startZoomer(macroNode,x,y) {
 	macroNode.inZoomer = true;
+	macroNode.startX = x;
+	macroNode.startY = y;
 	utils.addClass(document.body,"in-zoomer");
 }
 
 function stopZoomer(macroNode) {
+	var newScrollY = macroNode.yFactor * (macroNode.bodyHeight - macroNode.windowHeight);
 	macroNode.inZoomer = false;
+	window.scrollTo(0,newScrollY);
+	document.body.style.webkitTransform = "translateY(" + newScrollY * macroNode.xFactor + "px) " + 
+										  "scale(" + macroNode.scale + ") " +
+										  "translateY(" + ((macroNode.windowHeight / macroNode.scale) - macroNode.bodyHeight) * macroNode.yFactor * macroNode.xFactor + "px)";
 	utils.removeClass(document.body,"in-zoomer");
-	document.body.style.webkitTransform = "scale(1)";
+	document.body.style.webkitTransform = "translateY(0) scale(1) translateY(0)";
 }
 
 /*
-Set the position of the chooser panel within its wrapper given a touch/mouse position in screen coordinates
+Zoom the body element given a touch/mouse position in screen coordinates
 */
 function hoverZoomer(macroNode,x,y) {
 	// Put the transform origin at the top in the middle
 	document.body.style.webkitTransformOrigin = "50% 0";
-	// Compute the scale factor for fitting the entire page into the window
-	var scaleToFit = window.innerHeight / document.body.offsetHeight;
-	// Start with a scale factor determined by how far in from the right we are
-	var scale = (window.innerWidth - (window.innerWidth - x) * 2) / window.innerWidth;
-	// Don't scale any smaller than needed to fit the entire page
-	if(scale < scaleToFit) {
-		scale = scaleToFit;
+	// Some shortcuts
+	macroNode.bodyWidth = document.body.offsetWidth;
+	macroNode.bodyHeight = document.body.offsetHeight;
+	macroNode.windowWidth = window.innerWidth;
+	macroNode.windowHeight = window.innerHeight;
+	// Compute the scale factor for fitting the entire page into the window. This is
+	// the scale factor we'll use when the touch is far to the left
+	macroNode.minScale = macroNode.windowHeight / macroNode.bodyHeight;
+	if(macroNode.minScale < 0.1) {
+		// Don't scale to less than 10% of original size
+		macroNode.minScale = 0.1;
+	} else if(macroNode.minScale > 1) {
+		// Nor should we scale up if the body is shorter than the window
+		macroNode.minScale = 1;
 	}
-	// Nothing to shift horizontally
-	var translateX = 0;
-	// Start by offsetting to compensate for the current scroll position
-	var translateY = (window.scrollY / scale); 
+	// We divide the screen into two horizontal zones divided by the right edge of the body at maximum zoom (ie minimum scale)
+	macroNode.splitPos = macroNode.windowWidth/2 + (macroNode.bodyWidth * macroNode.minScale)/2;
+	// Compute the 0->1 ratio (from right to left) of the position of the touch within the right zone
+	macroNode.xFactor = (macroNode.windowWidth - x) / (macroNode.windowWidth - macroNode.splitPos);
+	if(macroNode.xFactor > 1) {
+		macroNode.xFactor = 1;
+	}
+	// And the 0->1 ration (from top to bottom) of the position of the touch down the screen
+	macroNode.yFactor = y/macroNode.windowHeight;
+	// Now interpolate the scale
+	macroNode.scale = (macroNode.minScale - 1) * macroNode.xFactor + 1;
 	// Apply the transform
-	document.body.style.webkitTransform = "scale(" + scale + ") translateX(" + translateX + "px) translateY(" + translateY + "px)";
-
+	document.body.style.webkitTransform = "translateY(" + window.scrollY * macroNode.xFactor + "px) " + 
+										  "scale(" + macroNode.scale + ") " +
+										  "translateY(" + ((macroNode.windowHeight / macroNode.scale) - macroNode.bodyHeight) * macroNode.yFactor * macroNode.xFactor + "px)";
 }
 
 exports.macro = {
@@ -53,13 +75,13 @@ exports.macro = {
 	},
 	events: {
 		touchstart: function(event) {
-			startZoomer(this);
-			hoverZoomer(this,event.touches[0].screenX,event.touches[0].screenY);
+			startZoomer(this,event.touches[0].clientX,event.touches[0].clientY);
+			hoverZoomer(this,event.touches[0].clientX,event.touches[0].clientY);
 			event.preventDefault();
 			return false;
 		},
 		touchmove: function(event) {
-			hoverZoomer(this,event.touches[0].screenX,event.touches[0].screenY);
+			hoverZoomer(this,event.touches[0].clientX,event.touches[0].clientY);
 			event.preventDefault();
 			return false;
 		},
diff --git a/tiddlywiki5/shadows/css/styles.css b/tiddlywiki5/shadows/css/styles.css
index 5cf7c0ba6..855073802 100644
--- a/tiddlywiki5/shadows/css/styles.css
+++ b/tiddlywiki5/shadows/css/styles.css
@@ -8,6 +8,10 @@ body {
 	line-height: 48px;
 }
 
+img {
+	max-width: 100%;
+}
+
 a.tw-tiddlylink-external::before {
 	content: "\27a0\00a0";
 }
@@ -158,7 +162,7 @@ body.in-zoomer {
 }
 
 body.in-zoomer .zoomer-panel div {
-	background: rgba(236,128,75,0.5);
+	background: rgba(235,235,235,0.5);
 }
 
 body.in-zoomer iframe {