From 4a7bd371625ec3e0133b62dec1b1cc2f343c40ee Mon Sep 17 00:00:00 2001
From: Brendan Dahl <brendan.dahl@gmail.com>
Date: Thu, 30 May 2013 08:17:16 -0700
Subject: [PATCH] Hide canvas overflow for high dpi screens.

---
 web/viewer.css |  4 ++++
 web/viewer.js  | 13 +++++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/web/viewer.css b/web/viewer.css
index 8aa0ef211..46a7c6f38 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -1129,6 +1129,10 @@ html[dir='rtl'] .outlineItem > a {
   bottom: 35px;
 }
 
+.canvasWrapper {
+  overflow: hidden;
+}
+
 canvas {
   margin: auto;
   display: block;
diff --git a/web/viewer.js b/web/viewer.js
index 7e171c521..69cd5c9b3 100644
--- a/web/viewer.js
+++ b/web/viewer.js
@@ -2501,12 +2501,21 @@ var PageView = function pageView(container, id, scale,
 
     this.renderingState = RenderingStates.RUNNING;
 
+    var viewport = this.viewport;
+    // Wrap the canvas so if it has a css transform for highdpi the overflow
+    // will be hidden in FF.
+    var canvasWrapper = document.createElement('div');
+    canvasWrapper.style.width = div.style.width;
+    canvasWrapper.style.height = div.style.height;
+    canvasWrapper.classList.add('canvasWrapper');
+
     var canvas = document.createElement('canvas');
     canvas.id = 'page' + this.id;
-    div.appendChild(canvas);
+    canvasWrapper.appendChild(canvas);
+    div.appendChild(canvasWrapper);
     this.canvas = canvas;
 
-    var scale = this.scale, viewport = this.viewport;
+    var scale = this.scale;
     var outputScale = PDFView.getOutputScale();
     canvas.width = Math.floor(viewport.width) * outputScale.sx;
     canvas.height = Math.floor(viewport.height) * outputScale.sy;