Bug 1451256 - Use block display for the animation boxes in the toolbar and the off-screen view stack. r=Gijs
This is required since the platform code doesn't blockify -moz-box anymore.
MozReview-Commit-ID: 53iYxZTHliF
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -116,16 +116,17 @@ panelview[mainview] > .panel-header {
.panel-viewcontainer[panelopen] {
transition-property: height;
transition-timing-function: var(--animation-easing-function);
transition-duration: var(--panelui-subview-transition-duration);
will-change: height;
}
.panel-viewcontainer.offscreen {
+ display: block;
position: absolute;
}
.panel-viewstack {
overflow: visible;
transition: height var(--panelui-subview-transition-duration);
}
--- a/browser/themes/shared/toolbarbutton-icons.inc.css
+++ b/browser/themes/shared/toolbarbutton-icons.inc.css
@@ -43,17 +43,17 @@ toolbar[brighttext] {
}
/* The animations for the reload-button and stop-button are disabled
outside of the nav-bar due to bug 1382894. */
:-moz-any(#reload-button, #stop-button) > .toolbarbutton-animatable-box {
display: none;
}
#nav-bar-customization-target > #stop-reload-button > :-moz-any(#reload-button, #stop-button) > .toolbarbutton-animatable-box {
- display: -moz-box;
+ display: block;
}
#stop-reload-button[animate] > #reload-button > .toolbarbutton-icon,
#stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-icon {
fill: transparent;
}
@keyframes reload-to-stop {
@@ -457,16 +457,20 @@ toolbar[brighttext] {
fill: inherit;
}
}
#library-button[animate] > .toolbarbutton-icon {
fill: transparent;
}
+.toolbarbutton-animatable-box {
+ display: block;
+}
+
.toolbarbutton-animatable-box[animate] {
position: absolute;
overflow: hidden;
/* Position the sprite at the y-position of the library-button, then adjust
based on the size difference between half of the button height and half
of the sprite height. The titlebar may have padding from -moz-appearance
that needs to be accounted for. */
top: calc(var(--library-button-y) + var(--library-button-height) / 2 - 27px - var(--toolbox-y));