Fixes plotly#7416

Hidden ticklabels don't take up space anymore.

Author: my-tien

src/plots/cartesian/axes.js

@@ -3915,11 +3915,24 @@ axes.drawLabels = function(gd, ax, opts) {
         }
     }
 
+    function removeHiddenLabels() {
+        // Remove all hidden labels to prevent them from affecting the layout.
+        tickLabels.each(function(d) {
+            var thisLabel = d3.select(this);
+            var textNode = thisLabel.select('text').node();
+            var opacity = window.getComputedStyle(textNode).opacity;
+            if (opacity == '0') {
+                thisLabel.select('text').text('');
+                d3.select(textNode).text('');
+            }
+        });
+    }
+
     if(ax._selections) {
         ax._selections[cls] = tickLabels;
     }
 
-    var seq = [allLabelsReady];
+    var seq = [allLabelsReady, removeHiddenLabels];
 
     // N.B. during auto-margin redraws, if the axis fixed its label overlaps
     // by rotating 90 degrees, do not attempt to re-fix its label overlaps

test/image/mocks/zz-label-spacing.json

@@ -0,0 +1,44 @@
+{
+  "data": [
+    {
+      "x": ["A", "B", "C"],
+      "y": [0, 40, 80],
+      "type": "scatter"
+    },
+    {
+      "x": ["A", "B", "C"],
+      "y": [0, 40, 80],
+      "type": "scatter",
+      "xaxis": "x2",
+      "yaxis": "y2"
+    }
+  ],
+  "layout": {
+    "title": {
+      "text": "The vertical grid lines in the subplots should be aligned."
+    },
+    "width": 600,
+    "xaxis": {
+      "anchor": "y"
+     },
+     "xaxis2": {
+      "anchor": "y2"
+     },
+    "yaxis": {
+      "range": [0, 80],
+      "dtick": 20,
+      "side": "right",
+      "ticklabelposition": "inside",
+      "anchor": "x",
+      "domain": [0, 0.45]
+    },
+    "yaxis2": {
+      "range": [0, 100],
+      "dtick": 20,
+      "side": "right",
+      "ticklabelposition": "inside",
+      "anchor": "x2",
+      "domain": [0.55, 1]
+     }
+  }
+}