--- a/browser/components/downloads/content/indicatorOverlay.xul
+++ b/browser/components/downloads/content/indicatorOverlay.xul
@@ -20,19 +20,19 @@
        downloads-button. -->
   <toolbarbutton id="downloads-button" indicator="true">
     <!-- The panel's anchor area is smaller than the outer button, but must
          always be visible and must not move or resize when the indicator
          state changes, otherwise the panel could change its position or lose
          its arrow unexpectedly. -->
     <stack id="downloads-indicator-anchor"
            consumeanchor="downloads-button">
-      <vbox id="downloads-indicator-icon">
+      <stack id="downloads-indicator-icon">
         <vbox id="downloads-indicator-progress-icon"/>
-      </vbox>
+      </stack>
       <vbox id="downloads-indicator-progress-area" pack="center">
         <description id="downloads-indicator-counter"/>
         <progressmeter id="downloads-indicator-progress" class="plain"
                        min="0" max="100"/>
       </vbox>
     </stack>
   </toolbarbutton>
 </overlay>

--- a/browser/themes/shared/downloads/indicator.inc.css
+++ b/browser/themes/shared/downloads/indicator.inc.css
@@ -1,23 +1,16 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-#downloads-indicator-icon {
-  position: relative;
-}
-
 #downloads-indicator-progress-icon {
   background: var(--downloads-indicator-image-attention) bottom no-repeat;
   background-size: 18px;
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  height: 0;
+  margin-top: 18px;
   /* From javascript side we use animation delay from 0s to -100s to show
    * corresponding frames needed for progress.
    * animation-delay is set to a positive value to make nothing shown.
    */
   animation-play-state: paused;
   animation-delay: 1s;
   animation-duration: 100s;
   animation-timing-function: linear;
@@ -26,32 +19,32 @@
 
 toolbar[brighttext] #downloads-indicator-progress-icon {
   background-image: var(--downloads-indicator-image-attention-inverted);
   animation-name: indicatorArrowProgressDark;
 }
 
 @keyframes indicatorArrowProgress {
   0% {
-    height: 35%;
+    margin-top: 12px;
     filter: brightness(1.2);
   }
   100% {
-    height: 87%;
+    margin-top: 2px;
     filter: brightness(1);
   }
 }
 
 @keyframes indicatorArrowProgressDark {
   0% {
-    height: 35%;
+    margin-top: 12px;
     filter: brightness(0.7);
   }
   100% {
-    height: 87%;
+    margin-top: 2px;
     filter: brightness(1);
   }
 }
 
 #downloads-button[notification="start"] > #downloads-indicator-anchor {
   animation-name: downloadsIndicatorStartJump;
   /* Upon changing the overall duration below, please keep the delay time of
      setTimeout() identical in indicator.js for this animation. */