Utilizing the vr feature from Bootstrap 5 to establish vertical ruler divisions in col-sm-1 between three chartjs graphs in col-sm-3. Encountering a peculiar issue where one vr appears slightly darker than the other. Struggling to determine the cause of this inconsistency. Additionally, applying style="justify-content: center;" to the row seems to alter the colors of the rulers, with the darker one becoming lighter and vice versa.
<div class="container-fluid">
<div class="card border-0">
<div class="card-body bg-body rounded">
<div class="row" style="justify-content: center;">
<div class="col-sm-3">
<div class="container">
foobar1
<canvas id="one"></canvas>
</div>
</div>
<div class="col-sm-1 align-self-center">
<div class="d-flex" style="justify-content: center;">
<div class="vr" style="height: 120px;"></div>
</div>
</div>
<div class="col-sm-3">
<div class="container">
foobar2
<canvas id="two"></canvas>
</div>
</div>
<div class="col-sm-1 align-self-center">
<div class="d-flex" style="justify-content: center;">
<div class="vr" style="height: 120px;"></div>
</div>
</div>
<div class="col-sm-3">
<div class="container">
foobar3
<canvas id="three"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
Associated JavaScript code:
const anyctx = document.getElementById('one') as any;
const foobar1 = new Chart(anyctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: 'foobar',
data: data,
backgroundColor: ['rgba(255, 159, 64, 0.2)'],
borderColor: ['rgba(255, 159, 64, 1)'],
borderWidth: 1,
},
],
},
});
When the row is not center justified, the second ruler appears slightly darker.
https://i.sstatic.net/K76ye.png
However, when the row is center justified, the first ruler is the one that appears slightly darker.
https://i.sstatic.net/r4BKt.png
Upon inspecting the element, it is observed that the background color property is set to currentColor in both scenarios for both rulers. This raises the question: what could be causing this inconsistency?
P.S. The project is built using Angular, although this detail may not be relevant to the issue at hand.