Vis.js group background styling - css

Question

I have a Vis.js timeline in an Angular5 project with three groups and multiple items/events in each. I figured out how to style each group background individually to make the alternating swim lanes more distinct, by doing:
.vis-background>.vis-group:nth-of-type(even) {
// there is an auto-generated empty group as the first .vis-group, so starting with the 2nd group
background-color: $gray-lighter;
}
.vis-labelset>.vis-label:nth-of-type(odd) {
background-color: $gray-lighter;
}
However, the vertical background grid lines are no longer visible in the groups that are colored gray. It's as if the group background color is layered on top of the grid lines. If I add a z-index: 1; to .vis-vertical or .vis-grid the lines and group color appear correctly, but I lose timeline zooming and movement functionality. How can I apply styling to groups, keep the vertical grid lines visible and also keep all timeline functionality?

Answer 1

A workaround I used that not resolves the problem, but made it less notorious, was define the group like this:
group=
{
id : 0,
content : 'My Group',
style : "background: rgba(82, 226, 233, 0.2);"
};
and define a background item like this
background_item=
{
group : 0,
start : '2018-10-29 00:00',
end : '2018-10-30 02:00',
type : 'background',
className : 'myClassName'
};
where the className come from this style:
.vis-item.vis-background.myClassName {
background-color: rgba(82, 226, 233, 0.2);
}
It uses transparency to prevent hide the vertical lines.
The result was something like this:
Hope it helps while someone found a definitive solution.