diff --git a/js/ui/overviewControls.js b/js/ui/overviewControls.js
index ba1cf275d..7563975df 100644
--- a/js/ui/overviewControls.js
+++ b/js/ui/overviewControls.js
@@ -520,6 +520,8 @@ const ControlsManager = new Lang.Class({
                                                    expand: true });
         this._group.add_actor(this._thumbnailsSlider.actor);
 
+        this._group.connect('notify::allocation', Lang.bind(this, this._updateWorkspacesGeometry));
+
         Main.overview.connect('showing', Lang.bind(this, this._updateSpacerVisibility));
         Main.overview.connect('item-drag-begin', Lang.bind(this,
             function() {
@@ -537,6 +539,26 @@ const ControlsManager = new Lang.Class({
             }));
     },
 
+    _updateWorkspacesGeometry: function() {
+        let [x, y] = this.actor.get_transformed_position();
+        let [width, height] = this.actor.get_transformed_size();
+        let geometry = { x: x, y: y, width: width, height: height };
+
+        let spacing = this.actor.get_theme_node().get_length('spacing');
+        let dashWidth = this._dashSlider.getVisibleWidth() + spacing;
+        let thumbnailsWidth = this._thumbnailsSlider.getNonExpandedWidth() + spacing;
+
+        geometry.width -= dashWidth;
+        geometry.width -= thumbnailsWidth;
+
+        if (this.actor.get_text_direction() == Clutter.TextDirection.LTR)
+            geometry.x += dashWidth;
+        else
+            geometry.x += thumbnailsWidth;
+
+        this.viewSelector.setWorkspacesGeometry(geometry);
+    },
+
     _setVisibility: function() {
         // Ignore the case when we're leaving the overview, since
         // actors will be made visible again when entering the overview
diff --git a/js/ui/viewSelector.js b/js/ui/viewSelector.js
index 639acf30b..a7ad1b53b 100644
--- a/js/ui/viewSelector.js
+++ b/js/ui/viewSelector.js
@@ -186,6 +186,10 @@ const ViewSelector = new Lang.Class({
             Main.overview.fadeInDesktop();
     },
 
+    setWorkspacesGeometry: function(geom) {
+        this._workspacesDisplay.setWorkspacesGeometry(geom);
+    },
+
     hide: function() {
         this._workspacesDisplay.hide();
     },
diff --git a/js/ui/workspacesView.js b/js/ui/workspacesView.js
index 9400d24ab..7cb3b7e58 100644
--- a/js/ui/workspacesView.js
+++ b/js/ui/workspacesView.js
@@ -429,7 +429,6 @@ const WorkspacesDisplay = new Lang.Class({
 
     _init: function() {
         this.actor = new St.Widget({ clip_to_allocation: true });
-        this.actor.connect('notify::allocation', Lang.bind(this, this._updateWorkspacesGeometry));
         this.actor.connect('parent-set', Lang.bind(this, this._parentSet));
 
         let clickAction = new Clutter.ClickAction()
@@ -631,20 +630,23 @@ const WorkspacesDisplay = new Lang.Class({
         }));
     },
 
+    // This geometry should always be the fullest geometry
+    // the workspaces switcher can ever be allocated, as if
+    // the sliding controls were never slid in at all.
+    setWorkspacesGeometry: function(geom) {
+        this._geometry = geom;
+        this._updateWorkspacesGeometry();
+    },
+
     _updateWorkspacesGeometry: function() {
         if (!this._workspacesViews.length)
             return;
 
-        let width = this.actor.allocation.x2 - this.actor.allocation.x1;
-        let height = this.actor.allocation.y2 - this.actor.allocation.y1;
-
-        let [x, y] = this.actor.get_transformed_position();
-
         let monitors = Main.layoutManager.monitors;
         let m = 0;
         for (let i = 0; i < monitors.length; i++) {
             if (i == this._primaryIndex) {
-                this._workspacesViews[m].setGeometry({ x: x, y: y, width: width, height: height });
+                this._workspacesViews[m].setGeometry(this._geometry);
                 m++;
             } else if (!this._workspacesOnlyOnPrimary) {
                 this._workspacesViews[m].setGeometry(monitors[i]);