This repository was archived by the owner on Jan 7, 2021. It is now read-only.
CSS transitions cause visual pulsing #69
Description
To add a little more visual appeal, I added some CSS transitions to the styling for indent-guide-improved. It works great, but I noticed that when I scroll, the styling pulses. I assume that this is because the classes indent-guide-stack and indent-guide-active are being removed and added as the user scrolls, triggering the transitions.
I have included a gif of this behavior at the bottom of this issue. (It may be difficult to see in gif format).
Here is the relevant styling that is in my styles.less file:
// Formatting for indent-guide-improved
.indent-guide-improved {
@color-off: fadeout(@brown-gray, 50%);
@color-ancestor: mix(@brown-gray, @orange, 75%);
@color-active: fadeout(@orange, 50%);
@light-spread: 10px;
@transition-speed: 0.5s;
background-color: @color-off;
box-shadow: 0 0 0 0 @color-off;
transition: box-shadow 0.5s, background-color 0.5s;
&.indent-guide-stack {
background-color: @color-ancestor;
box-shadow: 0 0 @light-spread 1px fadeout(@color-ancestor, 25%);
&.indent-guide-active {
background-color: @color-active;
box-shadow: 0 0 @light-spread 1px fadeout(@orange, 25%);
transition: box-shadow (@transition-speed * 1.75), background-color (@transition-speed * 1.75);
}
}
}