Unwanted 1px padding if div has a border. Only in chrome

user_1739957 0
Viewed 1121

Similar to this question (solution is useless): Chrome 1px line bug

My code: https://jsfiddle.net/91gryhdu/2/ (parent has blue border, red background. Child has no border and black background)

You shouldn't be able see any red, but in chrome, red edges appear if the blue border exists. Depending on the zoom level, there will either be 0, 2, or 4 red lines. Never 1 or 3.

On my computer, default zoom (100%) looks like this:

enter image description here

If I zoom > 100%:

enter image description here

If I zoom < 100%:

enter image description here

This is what it should look like regardless of zoom. Firefox shows no red, no matter the zoom level.

My code has the class circle and commented out border-radius because I ran into this issue while trying to create the below circles with only CSS. Its easier to see the issue with boxes.

enter image description here

I have tried relative vs absolute positioning, different display settings, defining all margins, em/px/%, paddings, etc. Nothing affects it. This leads me to believe its a CSS bug. The "solutions" I have found online, only fix the visual aspect.

The desired circles are very small and the white dot in the center becomes noticeably off-center in chrome. Its just enough to not look quite right.

How can I work around this issue without images/svg? I just need a little white circle inside a colored circle with a border. The connecting lines and the flattened tops don't matter. What matters is that the white dot is centered at the atomic level.

I have found that I can add a margin to the other two edges to counter the unwanted margins. In theory I could use JS to detect zoom and apply the CSS. Seems like a desperate/unreliable solution.

I'm going in circles trying to figure this out...

flexbox google-chrome css html
1 Answers

You could do this easily with flexbox, like so:

.outer-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: .6rem;
  height: .6rem;
  padding: .4rem;
  background: blue;
  border-radius: 50%;
}

.inner-dot {
  background: white;
  height: 100%;
  width: 100%;
  border-radius: 50%;
}
<div class="outer-circle">
  <div class="inner-dot"></div>
</div>

The Chrome bug could be due to the size units of your elements, they are small and your px values may not divide well by 4 which correspond to high resolution displays on e.g. retina Macs etc. If your pixels can't be divided by 4 without creating a floating point value, you may get unwanted artifacts like this and centered elements may be a pixel off the dead center as the algorithm has to decide where to put the color (it cannot put color halfway between pixels).

user_98824860
Related