Smooth background-color css transitions to cover up flash/delay when color changes

Question

Smooth background-color css transitions to cover up flash/delay when color changes

Opened this issue 2 months ago · 1 comments

The double flash experience

I love Adaptive Tab Bar Color and this theme's integration with it! However, when switching tabs for example, the change in color lags behind the change of page by a tiny but noticeable delay. This causes every switch of the view to consist of two distinct "flashes", which is a bit jarring when the color change is drastic and the colored areas take up a large portion of the screen. The sidebar and top bar need a few milliseconds to "catch up" to the change of the viewport, which is probably unavoidable since the dynamic color is done after the change via an extension.

Workaround

Assuming it's impossible to have them sync up completely (so there's only one big flash, and it's right when you click and not later), my preferred solution would be to have the background color animate the change with a smooth transition.

The good news: this is already possible with Adaptive Tab Bar Color, with some userChrome CSS laid out in issue #43 on that repo!

Current styles

#sidebar-box *,
#urlbar-background,
#navigator-toolbox {
  transition: background-color .5s cubic-bezier(0, 0, 0, 1);
}
.tab-background {
  transition: background-color .5s cubic-bezier(0, 0, 0, 1);
  box-shadow: none !important;
  background-image: none !important;
}
.tab-background[selected] {
  background-color: var(--tab-selected-bgcolor) !important;
}

Call for additional styles

The bad news: It has not been adapted for EdgyArc, so those rules only transition the navbar currently. The rest of the browser still flashes.

This should be easy enough to fix by adding some more EdgyArc-specific selectors. When I get time I could research that if need be, but it would probably be way faster for someone deeply familiar with the EdgyArc CSS to post them here. I would greatly appreciate it!

Better yet

Instead of making modifications to the EdgyArc css (which I will eventually forget, and lose when I install it again elsewhere), we could integrate it into the codebase, using CSS variables for the transition's settings. Basic example:

#sidebar-box *,
#urlbar-background,
#navigator-toolbox {
  transition: background-color var(--color-change-duration) cubic-bezier(0, 0, 0, 1);
}
...

Then users of both addons get the option for free. This doesn't get applied to anyone that doesn't want it because the current behavior can be preserved by keeping the duration at 0 by default -- disabling the transition.

Then, Adaptive Tab Bar Color could add another slider in the settings that sets this variable globally!

Thanks for the awesome theme.

Answer 1 · 2024-08-28T12:37:12.000Z

Here's the best I could do after playing around for some time. In some places the transition can be added fairly easily, but in some other places it can clash with existing transitions, making it tricky or even impossible to implement (such as tab name colors)

CleanShot.2024-08-28.at.15.33.18.mp4

Here's my code (no changes to the base code, although can be simplified if added to the base)

custom.css (userChrome.css):

:root {
  --color-change-duration: 200ms;
  --color-change-easing: ease;
}

/* Border around the page */
#browser,
#sidebar-box *,
#navigator-toolbox {
  transition: background-color var(--color-change-duration)
    var(--color-change-easing) !important;
}
#navigator-toolbox,
.browserContainer {
  &::before {
    transition: background-color var(--color-change-duration)
      var(--color-change-easing) !important;
  }
}
#urlbar-background {
  transition:
    background-color var(--color-change-duration) var(--color-change-easing),
    border-color var(--color-change-duration) var(--color-change-easing) !important;
}
#urlbar-input {
  transition: color var(--color-change-duration) var(--color-change-easing) !important;
}
/* Rounded corners */
#appcontent .browserStack::after {
  transition: box-shadow var(--color-change-duration) var(--color-change-easing) !important;
}
.toolbarbutton-1 > .toolbarbutton-icon,
.toolbarbutton-1 > .toolbarbutton-text,
.toolbarbutton-1 > .toolbarbutton-badge-stack,
:not(.panel-subview-body > toolbaritem) > .bookmark-item:not(menu, menuitem),
.urlbar-page-action,
.identity-box-button,
#tracking-protection-icon-container,
panel button,
panel menulist,
.titlebar-button {
  transition:
    background-color 0.25s ease,
    fill var(--color-change-duration) var(--color-change-easing) !important;
}
#navigator-toolbox {
  & .toolbarbutton-1,
  & .toolbarbutton-1 .toolbarbutton-icon {
    transition:
      opacity 300ms linear,
      fill var(--color-change-duration) var(--color-change-easing) !important;
  }
}
#identity-icon {
  transition: color var(--color-change-duration) var(--color-change-easing) !important;
}
.tab-background {
  transition: background-color var(--color-change-duration)
    var(--color-change-easing) !important;
  box-shadow: none !important;
  background-image: none !important;
}
.tab-background[selected] {
  background-color: var(--tab-selected-bgcolor) !important;
}

userContent.css:

@-moz-document regexp("^moz-extension://.*?/sidebar/sidebar.html")
{
  #root {
    --color-change-duration: 200ms;
    --color-change-easing: ease;
    transition:
      background-color var(--color-change-duration) var(--color-change-easing),
      color var(--color-change-duration) var(--color-change-easing) !important;
  }

  .bottom-space {
    transition:
      transform var(--d-fast),
      z-index var(--d-fast) var(--d-fast),
      background-color var(--color-change-duration) var(--color-change-easing),
      color var(--color-change-duration) var(--color-change-easing) !important;
  }

  .new-tab-btns {
    transition:
      transform var(--d-fast),
      opacity var(--d-fast),
      z-index var(--d-fast) var(--d-fast),
      background-color var(--color-change-duration) var(--color-change-easing),
      color var(--color-change-duration) var(--color-change-easing) !important;
  }

  .Tab .title {
    transition:
      transform var(--d-fast),
      color var(--color-change-duration) var(--color-change-easing) !important;
  }

  .TabsPanel .new-tab-btn > svg,
  .TabsPanel .new-tab-btn > img {
    transition: fill var(--color-change-duration) var(--color-change-easing);
  }

  .TabsPanel .new-tab-btns::after {
    transition: background-color var(--color-change-duration)
      var(--color-change-easing);
  }

  .NavigationBar .nav-item .icon {
    transition:
      opacity var(--d-fast),
      fill var(--color-change-duration) var(--color-change-easing) !important;
  }
  .NavigationBar .nav-item .len {
    transition: color var(--color-change-duration) var(--color-change-easing);
  }
}