diff --git a/draftlogs/7958_fix.md b/draftlogs/7958_fix.md
new file mode 100644
index 00000000000..9b22dfc85d1
--- /dev/null
+++ b/draftlogs/7958_fix.md
@@ -0,0 +1 @@
+- Keep Cartesian traces aligned with axes when automargin titles are combined with sliders or update menus [[#7958](https://github.com/plotly/plotly.js/pull/7958)]
diff --git a/src/plot_api/plot_api.js b/src/plot_api/plot_api.js
index 2c9878ba891..439ef2346fd 100644
--- a/src/plot_api/plot_api.js
+++ b/src/plot_api/plot_api.js
@@ -288,8 +288,11 @@ function _doPlot(gd, data, layout, config) {
         Plots.clearAutoMarginIds(gd);
 
         subroutines.drawMarginPushers(gd);
+        var title = gd._fullLayout.title;
+        var titlePushesMargin = title.text && title.automargin;
+        if (titlePushesMargin) subroutines.drawMainTitle(gd);
         Axes.allowAutoMargin(gd);
-        if (gd._fullLayout.title.text && gd._fullLayout.title.automargin) Plots.allowAutoMargin(gd, 'title.automargin');
+        if (titlePushesMargin) Plots.allowAutoMargin(gd, 'title.automargin');
 
         // TODO can this be moved elsewhere?
         if (fullLayout._has('pie')) {
diff --git a/test/jasmine/tests/titles_test.js b/test/jasmine/tests/titles_test.js
index 9744a517248..27152d7d3c4 100644
--- a/test/jasmine/tests/titles_test.js
+++ b/test/jasmine/tests/titles_test.js
@@ -882,6 +882,53 @@ describe('Title automargining', function() {
 
     afterEach(destroyGraphDiv);
 
+    it('keeps cartesian traces aligned with axes when controls also expand margins', function(done) {
+        Plotly.newPlot(gd, [{
+            x: [1, 2, 3],
+            y: [2, 1, 3],
+            mode: 'lines+markers',
+            line: {simplify: false}
+        }], {
+            margin: {autoexpand: true, t: 0},
+            title: {
+                text: 'Title',
+                automargin: true,
+                font: {size: 36}
+            },
+            sliders: [{
+                pad: {t: 30},
+                x: 0.05,
+                len: 0.95,
+                steps: [
+                    {label: '0', method: 'update', args: [{}, {}]},
+                    {label: '1', method: 'update', args: [{}, {}]}
+                ]
+            }],
+            updatemenus: [{
+                type: 'buttons',
+                x: 0.05,
+                y: 0,
+                xanchor: 'right',
+                yanchor: 'top',
+                direction: 'left',
+                pad: {t: 60, r: 20},
+                buttons: [{label: 'Play', method: 'skip'}]
+            }]
+        }).then(function() {
+            var plot = d3Select(gd);
+            var point = plot.select('.scatterlayer .point').node();
+            var yTick;
+
+            plot.selectAll('.ytick').each(function() {
+                if(d3Select(this).select('text').text() === '2') yTick = this;
+            });
+
+            expect(point).not.toBeNull();
+            expect(yTick).toBeDefined();
+            expect(point.getCTM().f).toBeCloseTo(yTick.querySelector('text').getCTM().f, 6);
+        }).then(done, done.fail);
+    });
+
     it('should avoid overlap with container for yref=paper and allow padding', function(done) {
         Plotly.newPlot(gd, data, {
             margin: {t: 0, b: 0, l: 0, r: 0},