diff --git a/src/xterm.js b/src/xterm.js
index a0c908a9..68061b70 100644
--- a/src/xterm.js
+++ b/src/xterm.js
@@ -302,7 +302,7 @@
      * Positions the composition view on top of the cursor and the textarea just below it (so the
      * IME helper dialog is positioned correctly).
      */
-    CompositionHelper.prototype.updateCompositionElements = function() {
+    CompositionHelper.prototype.updateCompositionElements = function(dontRecurse) {
       if (!this.isComposing) {
         return;
       }
@@ -310,9 +310,13 @@
       if (cursor) {
         this.compositionView.style.left = cursor.offsetLeft + 'px';
         this.compositionView.style.top = cursor.offsetTop + 'px';
-        this.textarea.style.left = cursor.offsetLeft + 'px';
+        var compositionViewBounds = this.compositionView.getBoundingClientRect();
+        this.textarea.style.left = cursor.offsetLeft + compositionViewBounds.width + 'px';
         this.textarea.style.top = (cursor.offsetTop + cursor.offsetHeight) + 'px';
       }
+      if (!dontRecurse) {
+        setTimeout(this.updateCompositionElements.bind(this, true), 0);
+      }
     };
 
     /**
diff --git a/test/composition-helper-test.js b/test/composition-helper-test.js
index ceb2b4ea..2f2ba5f1 100644
--- a/test/composition-helper-test.js
+++ b/test/composition-helper-test.js
@@ -14,6 +14,9 @@ describe('CompositionHelper', function () {
         add: function () {},
         remove: function () {},
       },
+      getBoundingClientRect: function () {
+        return { width: 0 }
+      },
       style: {
         left: 0,
         top: 0