diff --git a/toolkit/content/widgets/scrollbox.xml b/toolkit/content/widgets/scrollbox.xml
index df92aa238881..ff1bc0040c11 100644
--- a/toolkit/content/widgets/scrollbox.xml
+++ b/toolkit/content/widgets/scrollbox.xml
@@ -185,18 +185,14 @@
           return innerRect;
         ]]></getter>
       </property>
-      <field name="scrollboxPaddingStart"><![CDATA[
-        parseFloat(window.getComputedStyle(this._scrollbox)[
-          this.orient == "vertical" ? "paddingTop" :
-            (this._isRTLScrollbox ? "paddingRight" : "paddingLeft")
-        ]);
-      ]]></field>
-      <field name="scrollboxPaddingEnd"><![CDATA[{
-        parseFloat(window.getComputedStyle(this._scrollbox)[
-          this.orient == "vertical" ? "paddingBottom" :
-            (this._isRTLScrollbox ? "paddingLeft" : "paddingRight")
-        ]);
-      }]]></field>
+      <property name="scrollboxPaddingStart" readonly="true">
+        <getter><![CDATA[
+          var ltr = (window.getComputedStyle(this).direction == "ltr");
+          var paddingStartName = ltr ? "padding-left" : "padding-right";
+          var scrollboxStyle = window.getComputedStyle(this._scrollbox);
+          return parseFloat(scrollboxStyle.getPropertyValue(paddingStartName));
+        ]]></getter>
+      </property>
       <property name="scrollPosition">
         <getter><![CDATA[
           return this.orient == "vertical" ?
@@ -212,10 +208,12 @@
         ]]></setter>
       </property>
 
-      <field name="_startEndProps"><![CDATA[
-        this.orient == "vertical" ?
-          ["top", "bottom"] : ["left", "right"];
-      ]]></field>
+      <property name="_startEndProps" readonly="true">
+        <getter><![CDATA[
+          return this.orient == "vertical" ?
+                 ["top", "bottom"] : ["left", "right"];
+        ]]></getter>
+      </property>
 
       <field name="_isRTLScrollbox"><![CDATA[
         this.orient != "vertical" &&
@@ -224,39 +222,10 @@
 
       <field name="_scrollTarget">null</field>
 
-      <method name="_boundsWithoutFlushing">
-        <parameter name="element"/>
-        <body><![CDATA[
-          if (!("_DOMWindowUtils" in this)) {
-            try {
-              this._DOMWindowUtils =
-                window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
-                      .getInterface(Components.interfaces.nsIDOMWindowUtils);
-            } catch (e) {
-              // Can't access nsIDOMWindowUtils if we're unprivileged.
-              this._DOMWindowUtils = null;
-            }
-          }
-
-          return this._DOMWindowUtils ?
-                 this._DOMWindowUtils.getBoundsWithoutFlushing(element) :
-                 element.getBoundingClientRect();
-        ]]></body>
-      </method>
-
       <method name="_canScrollToElement">
         <parameter name="element"/>
         <body><![CDATA[
-          if (element.hidden) {
-            return false;
-          }
-
-          // See if the element is hidden via CSS without the hidden attribute.
-          // If we get only zeros for the client rect, this means the element
-          // is hidden. As a performance optimization, we don't flush layout
-          // here which means that on the fly changes aren't fully supported.
-          let rect = this._boundsWithoutFlushing(element);
-          return !!(rect.top || rect.left || rect.width || rect.height);
+          return window.getComputedStyle(element).display != "none";
         ]]></body>
       </method>
 
@@ -642,73 +611,40 @@
         ]]></body>
       </method>
 
-      <field name="_scrollButtonUpdatePending">false</field>
       <method name="_updateScrollButtonsDisabledState">
+        <parameter name="aScrolling"/>
         <body><![CDATA[
-          if (this._scrollButtonUpdatePending) {
-            return;
-          }
-          this._scrollButtonUpdatePending = true;
+          let scrolledToStart;
+          let scrolledToEnd;
 
+          // Avoid flushing layout when not overflowing or when scrolling.
           if (this.hasAttribute("notoverflowing")) {
-            // Invalidate layout lazily before painting the next frame.
-            window.requestAnimationFrame(() => {
-              this._scrollButtonUpdatePending = false;
-
-              this.setAttribute("scrolledtoend", "true");
-              this.setAttribute("scrolledtostart", "true");
-            });
-            return;
+            scrolledToStart = true;
+            scrolledToEnd = true;
+          } else if (aScrolling) {
+            scrolledToStart = false;
+            scrolledToEnd = false;
+          } else if (this.scrollPosition == 0) {
+            // In the RTL case, this means the _last_ element in the
+            // scrollbox is visible
+            scrolledToEnd = this._isRTLScrollbox;
+            scrolledToStart = !this._isRTLScrollbox;
+          } else if (this.scrollClientSize + this.scrollPosition == this.scrollSize) {
+            // In the RTL case, this means the _first_ element in the
+            // scrollbox is visible
+            scrolledToStart = this._isRTLScrollbox;
+            scrolledToEnd = !this._isRTLScrollbox;
           }
 
-          // Wait until after the next paint to get current layout data from
-          // getBoundsWithoutFlushing.
-          window.requestAnimationFrame(() => {
-            window.requestAnimationFrame(() => {
-              this._scrollButtonUpdatePending = false;
+          if (scrolledToEnd)
+            this.setAttribute("scrolledtoend", "true");
+          else
+            this.removeAttribute("scrolledtoend");
 
-              let scrolledToStart = false;
-              let scrolledToEnd = false;
-
-              if (this.hasAttribute("notoverflowing")) {
-                scrolledToStart = true;
-                scrolledToEnd = true;
-              } else {
-                let scrollboxPaddingStart = Math.round(this.scrollboxPaddingStart);
-                let scrollboxPaddingEnd = Math.round(this.scrollboxPaddingEnd);
-                let [start, end] = this._startEndProps;
-                if (this._isRTLScrollbox) {
-                  [start, end] = [end, start];
-                  scrollboxPaddingStart = -scrollboxPaddingStart;
-                  scrollboxPaddingEnd = -scrollboxPaddingEnd;
-                }
-
-                let scrollboxRect = this._boundsWithoutFlushing(this._scrollbox);
-                let elements = this._getScrollableElements();
-                let [firstElement, lastElement] = [elements[0], elements[elements.length - 1]];
-
-                if (firstElement &&
-                    this._boundsWithoutFlushing(firstElement)[start] - scrollboxPaddingStart == scrollboxRect[start]) {
-                  scrolledToStart = true;
-                } else if (lastElement &&
-                           this._boundsWithoutFlushing(lastElement)[end] + scrollboxPaddingEnd == scrollboxRect[end]) {
-                  scrolledToEnd = true;
-                }
-              }
-
-              if (scrolledToEnd) {
-                this.setAttribute("scrolledtoend", "true");
-              } else {
-                this.removeAttribute("scrolledtoend");
-              }
-
-              if (scrolledToStart) {
-                this.setAttribute("scrolledtostart", "true");
-              } else {
-                this.removeAttribute("scrolledtostart");
-              }
-            });
-          });
+          if (scrolledToStart)
+            this.setAttribute("scrolledtostart", "true");
+          else
+            this.removeAttribute("scrolledtostart");
         ]]></body>
       </method>
     </implementation>
@@ -861,7 +797,27 @@
       ]]></handler>
 
       <handler event="scroll"><![CDATA[
-        this._updateScrollButtonsDisabledState();
+        if (!this._delayedUpdateScrollButtonsTimer) {
+          // This is the beginning of a scrolling animation. We need to update
+          // scroll buttons now in case we were scrolled to the start or to the
+          // end before we started scrolling.
+          this._updateScrollButtonsDisabledState(true);
+        } else {
+          // We're in the middle of the scrolling animation. We'll restart the
+          // delayed update request so that we only update the scroll buttons
+          // a second time once we're done scrolling.
+          window.clearTimeout(this._delayedUpdateScrollButtonsTimer);
+        }
+
+        // Try to detect the end of the scrolling animation to update the
+        // scroll buttons again. To avoid false positives, this timeout needs
+        // to be big enough to account for intermediate frames that don't move
+        // the scroll position in case we're scrolling slowly.
+        this._delayedUpdateScrollButtonsTimer = setTimeout(() => {
+          // Scrolling animation has finished.
+          this._delayedUpdateScrollButtonsTimer = 0;
+          this._updateScrollButtonsDisabledState();
+        }, 200);
       ]]></handler>
     </handlers>
   </binding>
