Width with rem size deform if padding is present

Issue

I have a problem in my project. When I insert custom font-size at html level, the red badges deform me when there is padding (p-6) on the first line of code. Can anyone help me? I use tailwind, but this error is given to me even if I insert the width in the style, exclusively with the rem.

Demo

Solution

It's related to subpixel rendering. If you use 13px font-size at the html level, the width and height become 9.75px.

The solution is using a large value and scaling it.

Demo

I used w-6 h-6 ring-8 scale-50 instead of w-3 h-3 ring-4. And this looks perfect.

html {
  font-size: 13px;
}

<script src="https://cdn.tailwindcss.com"></script>

<div class="w-screen h-screen bg-neutral-50">
  <header class="flex flex-row bg-white p-6">
    <div class="flex-1 flex flex-row justify-end space-x-2">
      <div class="relative inline-block">
        <div class="w-12 h-12 bg-gray-100 rounded-full"></div>
        <div class="w-6 h-6 scale-50 bg-red-500 rounded-full ring-8 ring-white absolute top-0 right-0 origin-top-right"></div>
      </div>
      <div class="relative inline-block">
        <div class="w-12 h-12 bg-gray-100 rounded-full"></div>
        <div class="w-6 h-6 scale-50 bg-red-500 rounded-full ring-8 ring-white absolute top-0 right-0 origin-top-right"></div>
      </div>
      <div class="relative inline-block">
        <div class="w-12 h-12 bg-gray-100 rounded-full"></div>
        <div class="w-6 h-6 scale-50 bg-green-500 rounded-full ring-8 ring-white absolute bottom-0 right-0 origin-bottom-right"></div>
      </div>
    </div>
  </header>
</div>

Related answer

Answered By - doğukan