Prevent column drift by fixing the iframe and column widths to even i…

…ntegers.
joseph · Mar 17, 2014 · e993ece · e993ece
1 parent 0a88fac
commit e993ece
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 14 deletions.
diff --git a/src/compat/env.js b/src/compat/env.js
@@ -415,16 +415,6 @@ Monocle.Env = function () {
     }],
 
 
-    // Chrome and Firefox incorrectly clip text when the dimensions of
-    // a page are not an integer. IE10 clips text when the page dimensions
-    // are rounded.
-    //
-    ['roundPageDimensions', function () {
-      result(!(Monocle.Browser.is.IE && Monocle.Browser.ieVersion < 11));
-    }],
-
-
-
     // In IE10, the <html> element of the iframe's document has scrollbars,
     // unless you set its style.overflow to 'hidden'.
     //

diff --git a/src/dimensions/columns.js b/src/dimensions/columns.js
@@ -76,7 +76,10 @@ Monocle.Dimensions.Columns = function (pageDiv) {
       // Update offset because we're translating to zero.
       p.page.m.offset = 0;
 
-      // Apply style changes.
+      // Make sure that the frame is exactly the same width as the column.
+      p.page.m.activeFrame.style.width = p.width+'px';
+
+      // Apply style changes to the contents of the component.
       ce.style.cssText = cer;
       sty.innerHTML = rules;
 
@@ -116,9 +119,14 @@ Monocle.Dimensions.Columns = function (pageDiv) {
 
   function pageDimensions() {
     var elem = p.page.m.sheafDiv;
-    var w = elem.clientWidth;
-    if (elem.getBoundingClientRect) { w = elem.getBoundingClientRect().width; }
-    if (Monocle.Browser.env.roundPageDimensions) { w = Math.round(w); }
+    var w;
+    if (elem.getBoundingClientRect) {
+      w = elem.getBoundingClientRect().width;
+    } else {
+      w = elem.clientWidth;
+    }
+    w = Math.floor(w); // ensure it is an integer
+    w -= w % 2; // ensure it is an even number
     return { col: w, width: w + k.GAP, height: elem.clientHeight }
   }