Commit db2d0901 authored by Timothy Nikkel's avatar Timothy Nikkel
Browse files

Bug 1762885. Make sure the transition we use to fade out swipe to nav ui... 

Bug 1762885. Make sure the transition we use to fade out swipe to nav ui element will actually run. r=hiro

We can get into a state where box.style.opacity = 1 but that hasn't been flushed to the style system yet, the style system thinks the value is 0, so when we set box.style.opacity = 0 later it won't cause any transition to start and transitionend will never happen and the ui element will never been shown with non-zero opacity.

We use getComputedStyle to flush the value to the style system, this has two positive effects. It means we will show the ui element with non-zero opacity as well as making sure the transition will happen and transitionend will be called.

I think getComputedStyle should only flush in the relevant subtree (two elements total) so this should be fine.

Differential Revision: https://phabricator.services.mozilla.com/D142822
parent 828ae077

browser/base/content/browser-gestureSupport.js

+13 −2
Original line number Diff line number Diff line
@@ -698,8 +698,19 @@ var gHistorySwipeAnimation = { 
      return;

    }



    let box = this._prevBox.style.opacity > 0 ? this._prevBox : this._nextBox;

    if (box.style.opacity > 0) {

    let prevOpacity = window

      .getComputedStyle(this._prevBox)

      .getPropertyValue("opacity");

    let nextOpacity = window

      .getComputedStyle(this._nextBox)

      .getPropertyValue("opacity");

    let box = null;

    if (prevOpacity > 0) {

      box = this._prevBox;

    } else if (nextOpacity > 0) {

      box = this._nextBox;

    }

    if (box != null) {

      this._isStoppingAnimation = true;

      box.style.transition = "opacity 0.2s cubic-bezier(.07,.95,0,1)";

      box.addEventListener("transitionend", this, true);