--- a/dom/animation/KeyframeEffect.cpp
+++ b/dom/animation/KeyframeEffect.cpp
@@ -2011,16 +2011,21 @@ KeyframeEffectReadOnly::ShouldBlockCompo
   // to update this to only return true when that is the case since paused,
   // filling, cancelled Animations etc. shouldn't stop other Animations from
   // running on the compositor.
   MOZ_ASSERT(mAnimation && mAnimation->IsPlaying());
 
   bool shouldLog = nsLayoutUtils::IsAnimationLoggingEnabled();
 
   for (const AnimationProperty& property : mProperties) {
+    // If a property is overridden in the CSS cascade, it should not block other
+    // animations from running on the compositor.
+    if (!property.mWinsInCascade) {
+      continue;
+    }
     // Check for geometric properties
     if (IsGeometricProperty(property.mProperty)) {
       if (shouldLog) {
         nsCString message;
         message.AppendLiteral("Performance warning: Async animation of "
           "'transform' or 'opacity' not possible due to animation of geometric"
           "properties on the same element");
         AnimationUtils::LogAsyncAnimationFailure(message, aFrame->GetContent());

--- a/dom/animation/test/chrome/test_running_on_compositor.html
+++ b/dom/animation/test/chrome/test_running_on_compositor.html
@@ -15,16 +15,20 @@
 }
 @keyframes background {
   to { background-color: red; }
 }
 @keyframes rotate {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+@keyframes rotate_and_opacity {
+  from { transform: rotate(0deg); opacity: 1;}
+  to { transform: rotate(360deg); opacity: 0;}
+}
 div {
   /* Element needs geometry to be eligible for layerization */
   width: 100px;
   height: 100px;
   background-color: white;
 }
 </style>
 </head>
@@ -260,10 +264,27 @@ promise_test(function(t) {
 
   return animation.ready.then(t.step_func(function() {
     assert_equals(animation.isRunningOnCompositor, omtaEnabled,
        'Transition reports that it is running on the compositor'
        + ' during playback for opacity transition');
   }));
 }, 'isRunningOnCompositor for transitions');
 
+promise_test(function(t) {
+  var div = addDiv(t, { style: 'animation: rotate_and_opacity 100s; ' +
+                               'backface-visibility: hidden; ' +
+                               'transform: none !important;' });
+  var animation = div.getAnimations()[0];
+
+  return animation.ready.then(t.step_func(function() {
+    assert_equals(animation.isRunningOnCompositor, omtaEnabled,
+       'If an animation has a property that can run on the compositor and a '
+       + 'property that cannot (due to Gecko limitations) but where the latter'
+       + 'property is overridden in the CSS cascade, the animation should '
+       + 'still report that it is running on the compositor');
+  }));
+}, 'isRunningOnCompositor is true when a property that would otherwise block ' +
+   'running on the compositor is overridden in the CSS cascade');
+
+</script>
 </script>
 </body>