Bug 826938 - Hide canvas overflow for hidpi screens. r=yury, a=akeybl
authorBrendan Dahl <bdahl@mozilla.com>
Mon, 03 Jun 2013 10:27:25 -0700
changeset 142873 1504352b0676f73a6b184f4c1c8fa6b7a1191803
parent 142872 6f7c753b3abc0f242e63659960cce41a22bdc3d2
child 142874 0fbf00829f385d37d7a39f7549f9496c46e9a88e
push id2579
push userakeybl@mozilla.com
push dateMon, 24 Jun 2013 18:52:47 +0000
treeherdermozilla-beta@b69b7de8a05a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersyury, akeybl
bugs826938
milestone23.0a2
Bug 826938 - Hide canvas overflow for hidpi screens. r=yury, a=akeybl
browser/extensions/pdfjs/content/web/viewer.css
browser/extensions/pdfjs/content/web/viewer.js
--- a/browser/extensions/pdfjs/content/web/viewer.css
+++ b/browser/extensions/pdfjs/content/web/viewer.css
@@ -1079,16 +1079,20 @@ html[dir='rtl'] .outlineItem > a {
 #sidebarControls {
   position:absolute;
   width: 180px;
   height: 32px;
   left: 15px;
   bottom: 35px;
 }
 
+.canvasWrapper {
+  overflow: hidden;
+}
+
 canvas {
   margin: auto;
   display: block;
 }
 
 .page {
   direction: ltr;
   width: 816px;
--- a/browser/extensions/pdfjs/content/web/viewer.js
+++ b/browser/extensions/pdfjs/content/web/viewer.js
@@ -2176,22 +2176,31 @@ var PageView = function pageView(contain
     }
 
     if (this.renderingState !== RenderingStates.INITIAL) {
       console.error('Must be in new state before drawing');
     }
 
     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;
 
     var textLayerDiv = null;
     if (!PDFJS.disableTextLayer) {
       textLayerDiv = document.createElement('div');
       textLayerDiv.className = 'textLayer';