ui: Fix flickering track pin buttons
When track pin buttons were partially obscured by a track group header,
they would flicker when the mouse was hovered over both the header and
the button simultaneously.
This is due to the fact that their visibility was being controlled by
setting their `opacity` CSS property to 0 to make these buttons
invisible. Any element whose opacity is less than 1 creates a new
stacking context, meaning that the button appeared above the sticky
group header element.
However, when hovered, the button opacity was being set back to 1, so
the stacking context was lost, causing the button to be moved behind the
group header and thus not receive the hover state any more, causing it's
opacity to be set to 0 again, ad infinium.
This CL switches from using `opacity` to control visibility to using
`visibility` instead, which doesn't create a new stacking context.
Change-Id: I5b5914a8f9626a830b8d6f0b4ef234fc01a9307f
diff --git a/ui/src/assets/track_panel.scss b/ui/src/assets/track_panel.scss
index 0091fba..5025959 100644
--- a/ui/src/assets/track_panel.scss
+++ b/ui/src/assets/track_panel.scss
@@ -106,11 +106,11 @@
cursor: pointer;
width: 22px;
font-size: 18px;
- opacity: 0;
+ visibility: hidden;
}
.track-button.show {
- opacity: 1;
+ visibility: visible;
}
.track-button.full-height {
display: flex;
@@ -124,7 +124,7 @@
}
&:hover .track-button {
- opacity: 1;
+ visibility: visible;
}
&.flash {
background-color: #ffe263;