CODEWITHSUNDEEP
cssrendering
tubbsy
tubbsy

Reputation: 61

Same CSS, Same Page, Different Rendering

Can anyone explain the cause of this difference shown below?

in the bottom panel, the colored bars render thicker than the top panel.

enter image description here

The CSS is the same for both;

.colored-bar {
    width: 100%;
    height: 2px;
}

Browser: Chrome 84

Please see live repro here: CodePen

What i see in CodePen;

enter image description here

Upvotes: 0

Views: 279

Answers (1)

Magiczne
Magiczne

Reputation: 1616

Probably you have turned on magnification in the browser. Disable it and everything should be correct.

125% magnification show exactly the same problem as on your screenshot.

Update 1:

Also if I set scaling directly in the Windows screen settings to 125% the problem shows up.

Update 2:

I may found a possible solution. Just use pseudoelements instead of normal ones and everything seems to be working perfectly, but I didn't do an extensive testing.

.kpi {
  border: 1px solid black;
  height: 56px;
  width: 175px;
  padding: 10px;
}

.box {
  display: flex;
  flex-direction: column;
  
  width: 45px;
  height: 50px;
  text-align: center;
}

.box::after {
  content: '';
  width: 100%;
  
  border-bottom: 2px solid #0f0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex space-between">
  <div class="col d-flex flex-column justify-content-between">
     <div class="row kpi mb10 d-flex justify-content-between">
       <div class="box">
         Test
       </div>
       <div class="box">
         Test
       </div>
       <div class="box">
         Test
       </div>
     </div>
     <div class="row kpi mb10 d-flex justify-content-between">
       <div class="box">
         Test
       </div>
       <div class="box">
         Test
       </div>
       <div class="box">
         Test
       </div>
     </div>
  </div>
</div>

Upvotes: 2

Related Questions