diff --git a/accessible/generic/LocalAccessible.cpp b/accessible/generic/LocalAccessible.cpp
index 05afcee078ff..43ad36474a0a 100644
--- a/accessible/generic/LocalAccessible.cpp
+++ b/accessible/generic/LocalAccessible.cpp
@@ -3757,6 +3757,9 @@ void LocalAccessible::MaybeQueueCacheUpdateForStyleChanges() {
     }
 
     if (sendTransformUpdate) {
+      // If our transform matrix has changed, it's possible our
+      // viewport cache has also changed.
+      mDoc->SetViewportCacheDirty(true);
       // Queuing a cache update for the TransformMatrix domain doesn't
       // necessarily mean we'll send the matrix itself, we may
       // send a DeleteEntry() instead. See BundleFieldsForCache for
diff --git a/accessible/tests/browser/states/browser_test_visibility.js b/accessible/tests/browser/states/browser_test_visibility.js
index d3843b7eea99..8707b21d8bc7 100644
--- a/accessible/tests/browser/states/browser_test_visibility.js
+++ b/accessible/tests/browser/states/browser_test_visibility.js
@@ -158,3 +158,26 @@ addAccessibleTask(
   },
   { chrome: true, iframe: true, remoteIframe: true }
 );
+
+// test dynamic translation
+addAccessibleTask(
+  `<div id="container" style="position: absolute; left: -300px; top: 100px;">Hello</div><button id="b" onclick="container.style.transform = 'translateX(400px)'">Move</button>`,
+  async function(browser, accDoc) {
+    const container = findAccessibleChildByID(accDoc, "container");
+    await untilCacheOk(
+      () => testVisibility(container, true, false),
+      "container should be off screen and visible"
+    );
+    await invokeContentTask(browser, [], () => {
+      let b = content.document.getElementById("b");
+      b.click();
+    });
+
+    await waitForContentPaint(browser);
+    await untilCacheOk(
+      () => testVisibility(container, false, false),
+      "container should be on screen and visible"
+    );
+  },
+  { chrome: true, iframe: true, remoteIframe: true }
+);