Calculate and use scrollbar width as needed

index.js

@@ -9,16 +9,8 @@
 var properties = [
   'direction',  // RTL support
   'boxSizing',
-  'width',  // on Chrome and IE, exclude the scrollbar, so the mirror div wraps exactly as the textarea does
   'height',
   'overflowX',
-  'overflowY',  // copy the scrollbar for IE
-
-  'borderTopWidth',
-  'borderRightWidth',
-  'borderBottomWidth',
-  'borderLeftWidth',
-  'borderStyle',
 
   'paddingTop',
   'paddingRight',
@@ -50,6 +42,25 @@ var properties = [
 
 var isBrowser = (typeof window !== 'undefined');
 var isFirefox = (isBrowser && window.mozInnerScreenX != null);
+var scrollbarWidth = 0;
+
+// modified from http://davidwalsh.name/detect-scrollbar-width
+function getScrollbarWidth() {
+  if (!scrollbarWidth) {
+    var div = document.createElement('div'),
+      style = div.style;
+    document.body.appendChild(div);
+    style.position = 'absolute';
+    style.top = '-9999px';
+    style.left = 0;
+    style.width = style.height = '100px';
+    style.overflow = 'scroll';
+    style.visibility = 'hidden';
+    scrollbarWidth = div.offsetWidth - div.clientWidth;
+    document.body.removeChild(div);
+  }
+  return scrollbarWidth;
+};
 
 function getCaretCoordinates(element, position, options) {
   if(!isBrowser) {
@@ -85,14 +96,16 @@ function getCaretCoordinates(element, position, options) {
     style[prop] = computed[prop];
   });
 
+  style.overflowY = element.scrollHeight > parseInt(computed.height) ? 'scroll' : 'auto';
+
   if (isFirefox) {
     // Firefox lies about the overflow property for textareas: https://bugzilla.mozilla.org/show_bug.cgi?id=984275
-    if (element.scrollHeight > parseInt(computed.height))
-      style.overflowY = 'scroll';
+    // so we still use computed width
+    style.width = computed.width;
   } else {
-    style.overflow = 'hidden';  // for Chrome to not render a scrollbar; IE keeps overflowY = 'scroll'
+    // include scrollbar width - Chrome & IE renders scrollbar and gets width added
+    style.width = parseInt( computed.width, 10 ) + getScrollbarWidth() + 'px';
   }
-
   div.textContent = element.value.substring(0, position);
   // the second special handling for input type="text" vs textarea: spaces need to be replaced with non-breaking spaces - http://stackoverflow.com/a/13402035/1269037
   if (element.nodeName === 'INPUT')

test/index.css

@@ -1,13 +1,23 @@
-input[type="text"], textarea {
-  font-family: 'Times New Roman'; /* a proportional font makes it more difficult to calculate the position */
-  font-size: 14px;
-  line-height: 16px;
-  padding: 24px 32px 16px 8px;    /* different paddings so position computations don't accidentally return a "correct" result */
-  text-transform: uppercase;      /* this drastically changes character width on proportional fonts */
-  text-indent: 20px;
-  border: 16px lightblue dotted;  /* needs to be accounted for when returning the final position */
-  border-right-width: 24px;       /* discourage naive border arithmetic */
-  background: lightyellow;
-  tab-size: 20;
-  -moz-tab-size: 20;
-}
+input[type="text"], textarea {
+  font-family: 'Times New Roman'; /* a proportional font makes it more difficult to calculate the position */
+  font-size: 14px;
+  line-height: 16px;
+  padding: 24px 32px 16px 8px;    /* different paddings so position computations don't accidentally return a "correct" result */
+  text-transform: uppercase;      /* this drastically changes character width on proportional fonts */
+  text-indent: 20px;
+  border: 16px lightblue dotted;  /* needs to be accounted for when returning the final position */
+  border-right-width: 24px;       /* discourage naive border arithmetic */
+  background: lightyellow;
+  tab-size: 20;
+  -moz-tab-size: 20;
+}
+body {
+  width: 400px;
+  position: relative;
+}
+#input-textarea-caret-position-mirror-div {
+  background: #ddd;
+  position: fixed;
+  top: 150px;
+  left: 400px;
+}

test/index.html

@@ -12,6 +12,10 @@
 
     <input type="text" size="15" maxlength="240" placeholder="Enter text here">
 
+    <hr/>
+    <label>
+      <input type="checkbox" id="mirrorDivDisplay">Show mirror div
+    </label>
     <hr/>
 
     <textarea rows="25" cols="40">
@@ -57,7 +61,9 @@
 
         function update() {
           // change debug option to true for testing purposes only!
-          var coordinates = getCaretCoordinates(element, element.selectionEnd, { debug: !true });
+          var coordinates = getCaretCoordinates(element, element.selectionEnd, {
+            debug: document.getElementById('mirrorDivDisplay').checked
+          });
           console.log('(top, left) = (%s, %s)', coordinates.top, coordinates.left);
           rect.style.top = element.offsetTop
             - element.scrollTop