Context
I am working on a website using ASP.NET Core and Bootstrap 3, and I'm running into an issue that completely stumps me. I've been banging my head on this for about an hour and a half and finally decided I needed to get some expert advice.
The problem I am facing is the inconsistent display of (what should be) identical HTML elements.
Do you see that teeny-tiny offset? It's on that middle card, but not the other two. The difference between that element is half a pixel These small errors are littered throughout the entire list of results, despite the fact that the HTML is identical (since they are generated by a foreach-loop). Note that the tops of the elements are consistent, so it's actually the height that's different.
To make matters even more interesting, it doesn't happen on every card, and it's only showing up in Firefox. (Tested on Chrome, EdgeI've been trying to identify a pattern to troubleshoot, but so far I'm stuck.
Code
These Game Result cards are made up of:
- A parent div for borders/margins
And three child elements:
-The allied result (score and name on the left)
-The spacer (made using CSS triangles)
-The enemy result (score and name on the right)
For the code itself, There's a foreach loop that iterates through each game result in the ViewModel, and executes this for each one:
@if (battle.GetTeam() == 1)
{
<div class="game-result-card" id="accordion">
<div class="team-result team-result-ally team-result-red">
<h2>@battle.score</h2>
<h3>@battle.primaryCompany</h3>
</div>
<div class="game-result-spacer-red-active"></div>
<div class="team-result team-result-enemy team-result-blue">
<h2>@battle.enemyScore</h2>
<h3>@battle.enemyHeader</h3>
</div>
</div>
}
else
{
<div class="game-result-card" id="accordion">
<div class="team-result team-result-ally team-result-blue">
<h2>@battle.score</h2>
<h3>@battle.primaryCompany</h3>
</div>
<div class="game-result-spacer-blue-active"></div>
<div class="team-result team-result-enemy team-result-red">
<h2>@battle.enemyScore</h2>
<h3>@battle.enemyHeader</h3>
</div>
</div>
}
So basically, the "if" just decides if it's a red card or a blue card on the left. Finally, I've got the following CSS elements applied (beyond anything included in Bootstrap.)
.body-content {
max-width: 600px;
align-items: center;
}
...(removed extraneous things)...
.game-result-card {
display: flex;
justify-content: space-around;
width: 100%;
height: 116px;
border: 4px solid #000000;
box-shadow: 5px 5px 5px #333333;
margin-bottom: 36px;
}
.team-result {
color: #ffffff;
text-align: center;
height: 110px;
width: 40%;
border: 0;
}
.team-result h2 {
font-size: 40px;
margin: 0px 0px 0px 0px;
padding: 8px 0px 0px 0px;
}
.team-result h3 {
font-size: 16px;
}
.team-result-red {
width: 50%;
background-color: firebrick;
}
.team-result-blue {
width: 50%;
background-color: darkslateblue;
}
.game-result-spacer-red-active {
width: 0;
height: 0;
border-bottom: 110px solid darkslateblue;
border-left: 110px solid firebrick;
}
.game-result-spacer-blue-active {
width: 0;
height: 0;
border-bottom: 110px solid firebrick;
border-left: 110px solid darkslateblue;
}
What I've Tried So Far
The main solutions I looked into were tweaking the pixel widths on the elements to see if different values affected it, or if using % based width fixed it. No beans there.
I also tried using Firefox's Inspector (F12 menu) to verify that elements were the same size (height and width). They were.
I also tried using the F12 menu to edit the elements so that they had identical content - theory was that the text width would cause a slight increase. However, nothing seemed to work. (Imgur album for a better description of this)[https://i.stack.imgur.com/i78Og.jpg
Interesting data point, when I zoom into 200% on my screen (3200 x 1800 resolution), the problem disappears. That made me think it was width-related, but the two things previous items didn't turn up solutions.
Finally, I found this Stack Overflow (question about a similar kind of offset problem,)[Absolutely-positioned table header (th) - which browser is wrong? but it seemed to relate only to the collapsing borders element.
My going theory is that it's some kind of similar rounding error related to Firefox, but nothing seems to change when I move the parent div's border element to 4px instead of 3 (that way it is even).
TL;DR
To summarize this giant post, I'm getting inconsistent, half-pixel offsets in Firefox only. Although I am looking for a solution in the end, I am much more interested in the "why" behind this.
