diff --git a/app/assets/stylesheets/common/d-editor.scss b/app/assets/stylesheets/common/d-editor.scss
index 8f89999dbe0..3d5eaacad5c 100644
--- a/app/assets/stylesheets/common/d-editor.scss
+++ b/app/assets/stylesheets/common/d-editor.scss
@@ -178,6 +178,7 @@
 
   &:hover {
     .button-wrapper {
+      pointer-events: auto;
       opacity: 1;
     }
   }
@@ -185,12 +186,10 @@
   .button-wrapper {
     min-width: 10em;
     width: 100%;
-
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
     gap: 0 0.5em;
-
     position: absolute;
     height: calc(var(--resizer-height) + 0.5em);
     bottom: 0;
@@ -199,9 +198,11 @@
     transition: all 0.25s;
     z-index: 1; // needs to be higher than image
     background: var(--secondary); // for when images are wider than controls
+    pointer-events: none; // the controls shouldn't be usable while invisible
 
     &[editing] {
       opacity: 1;
+      pointer-events: auto;
     }
 
     .scale-btn-container,
@@ -314,6 +315,7 @@
 
 .mobile-view .d-editor-preview .image-wrapper .button-wrapper {
   opacity: 1;
+  pointer-events: auto;
 }
 
 // d-editor bar button sizing