Render is not always the same

Question

I might be going pixel-crazy, but when I'm working on front-end design, I like things to be accurate. Let's say I have 3 squares in a container element, with exactly the same HTML markup:

<div class="page">
    <div class="active"></div>
</div>

They all have the same style. The one of the middle is not the exactly same than the others. It misses some padding pixels on the sides.

Can someone tell me why? Is there a way to make it work? I encounter the problem on Chrome (last version). On Firefox, none of them are alike. It's a shame but it only works as expected on IE11.

Code (JSFiddle):

body {
  background-color: #222;
}

.navigator {
  position: absolute;
  bottom: 20px;
}

.page {
  border: 1px solid #3cbeff;
  box-sizing: border-box;
  display: inline-block;
  height: 15px;
  margin: 5px;
  width: 15px;
  padding: 2px;
}

.page>div {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.page>div.active {
  animation-name: active;
  animation-direction: alternate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  height: 100%;
  opacity: 1;
}

@keyframes active {
  from {
    background-color: #3cbeff;
  }
  to {
    background-color: white;
  }
}

<div class="navigator">
  <div class="page">
    <div class="active"></div>
  </div>
  <div class="page">
    <div class="active"></div>
  </div>
  <div class="page">
    <div class="active"></div>
  </div>
</div>

Here is what I got on my screen. For Chrome and Firefox:

With @KarelIG solution (JSFiddle):

body {
  background-color: #222;
}

.navigator {
  position: absolute;
  bottom: 20px;
}

.page {
  border: 1px solid #3cbeff;
  display: inline-block;
  height: 15px;
  margin: 5px;
  width: 15px;
  padding: 0.2em;
}

.page>div {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.page>div.active {
  animation-name: active;
  animation-direction: alternate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  height: 100%;
  opacity: 1;
}

@keyframes active {
  from {
    background-color: #3cbeff;
  }
  to {
    background-color: white;
  }
}

<div class="navigator">
  <div class="page">
    <div class="active"></div>
  </div>
  <div class="page">
    <div class="active"></div>
  </div>
  <div class="page">
    <div class="active"></div>
  </div>
</div>

I got this:

To me, the first square is slightly different from the others. On the two others, the side padding is 1px less than the top/bottom padding.

EDIT

It is definitely a subpixel rendering problem.

I guess I cannot help it: even if everything is in px in my CSS, I obviously have to center one element or another, and I cannot guarantee it'll fit every hardware pixel grid.

I saw that it was the problem by moving the squares: according to their position and margin between each other, the square would change and eventually not be square.

I assume I should just let it go as it is! Except if someone has another idea, but I didn't find any clean solution that will work for every browser to solve that kind of problem so far.

I'm using chrome and your fiddle shows three perfectly equal squares — Bardo, Jun 28 '17 at 11:48
Uhm... checked your fiddle in Chrome, Firefox, Edge and IE. I quickly swapped between those browsers and couldn't find any difference. It shows what the CSS rules are describing. — KarelG, Jun 28 '17 at 11:50
I just edited the question with what I am seeing on my screen. But if it is just on my screen, maybe it's not very important... But still, I wonder why do I get that render :( — sjahan, Jun 28 '17 at 11:52
They look slightly different to me in Chrome but only if zoom is not 100%. — Turnip, Jun 28 '17 at 11:52
I thought it was due to the zoom too, but my Chrome was set to 100% when I did the screenshot... — sjahan, Jun 28 '17 at 11:54
Aah got the difference. I've played with the zoom level and I _did_ find the differences. — KarelG, Jun 28 '17 at 11:54
Probably nearly no one will ever pay attention to those missing pixels, but this feels really odd to do three times the same thing and not getting the same result each time! (I've added what I got for Firefox, also default zoom 100%) — sjahan, Jun 28 '17 at 11:57
just remove `box-sizing: border-box;` and use `padding: 0.2em` instead. Would do the thing. — KarelG, Jun 28 '17 at 11:58
I've tried your solution but it's still slightly different when it renders on my screen (I edited my post with a screenshot). I assume it's not really important and it basically depends from the resolution and the graphical rendering, from one computer to another... — sjahan, Jun 28 '17 at 12:15
Possible duplicate of [How to remove the space between inline-block elements?](https://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Rob, Jun 28 '17 at 12:35
I think this is related to subpixels issues: https://stackoverflow.com/questions/34676263/sub-pixels-calculated-and-rendered-differently-among-browsers I suppose the only way I have is to implement it another way... without any padding/margin — sjahan, Jun 28 '17 at 13:02

Render is not always the same

0 Answers0