--- a/toolkit/content/xul.css
+++ b/toolkit/content/xul.css
@@ -446,17 +446,17 @@ panel[type="arrow"] {
 /* On Mac, use the properties "-moz-window-transform" and "-moz-window-opacity"
    instead of "transform" and "opacity" for these animations.
    The -moz-window* properties apply to the whole window including the window's
    shadow, and they don't affect the window's "shape", so the system doesn't
    have to recompute the shadow shape during the animation. This makes them a
    lot faster. In fact, Gecko no longer triggers shadow shape recomputations
    for repaints.
    These properties are not implemented on other platforms. */
-panel[type="arrow"]:not([animate="false"]) {
+panel[type="arrow"][side]:not([animate="false"]) {
   -moz-window-opacity: 0;
   -moz-window-transform: translateY(-70px);
   transition-property: -moz-window-transform, -moz-window-opacity;
   transition-duration: 0.18s, 0.18s;
   transition-timing-function:
     var(--animation-easing-function), ease-out;
 }
 
@@ -467,23 +467,23 @@ panel[type="arrow"][side="bottom"]:not([
 panel[type="arrow"][side][animate="open"] {
   -moz-window-opacity: 1.0;
   transition-duration: 0.18s, 0.18s;
   -moz-window-transform: none;
   transition-timing-function:
     var(--animation-easing-function), ease-in-out;
 }
 
-panel[type="arrow"][animate="cancel"] {
+panel[type="arrow"][side][animate="cancel"] {
   -moz-window-transform: none;
 }
 
 %elifndef MOZ_WIDGET_GTK
 
-panel[type="arrow"]:not([animate="false"]) {
+panel[type="arrow"][side]:not([animate="false"]) {
   opacity: 0;
   transform: translateY(-70px);
   transition-property: transform, opacity;
   transition-duration: 0.18s, 0.18s;
   transition-timing-function:
     var(--animation-easing-function), ease-out;
 }
 
@@ -494,17 +494,17 @@ panel[type="arrow"][side="bottom"]:not([
 panel[type="arrow"][side][animate="open"] {
   opacity: 1.0;
   transition-duration: 0.18s, 0.18s;
   transform: none;
   transition-timing-function:
     var(--animation-easing-function), ease-in-out;
 }
 
-panel[type="arrow"][animate="cancel"] {
+panel[type="arrow"][side][animate="cancel"] {
   transform: none;
 }
 
 %endif
 panel[type="arrow"][animating] {
   pointer-events: none;
 }