CODEWITHSUNDEEP
htmlcssresponsive-designborder
Antro
Antro

Reputation: 41

border radius not round as expected

codepen

In above example, I have tried switch box style and i have tried in em value,when i have written font size 16px based on their parents ,according veiwport there will be changes in font size while changing switch box circle is not perfect ,For particular font size is suitable (eg:parent font-size 20px,22px)

Here is the code

.parent {
  font-size: 16px;
  text-align: center;
  margin-top: 10px
}

.BP_swtchbox {
  display: inline-block;
  font-size: 1em
}

.BP_Swtch {
  cursor: pointer;
  background: #d7d9dd;
  border-radius: 0.313em;
  height: 0.625em;
  width: 1.500em;
  display: inline-block;
  position: relative;
  transition: .4s;
  -ms-transition: .4s;
  -moz-transition: .4s;
  -webkit-transition: .4s
}

.BP_swtchbox input {
  display: none
}

.BP_Swtbx_lb {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px 0 #777;
  height: 0.875em;
  width: 0.875em;
  position: absolute;
  top: 0;
  left: 0;
  transition: .3s cubic-bezier(.4, 1.3, .65, 1.1);
  -ms-transition: .3s cubic-bezier(.4, 1.3, .65, 1.1);
  -moz-transition: .3s cubic-bezier(.4, 1.3, .65, 1.1);
  -webkit-transition: .3s cubic-bezier(.4, 1.3, .65, 1.1);
  bottom: 0;
  margin: auto
}

.BP_swtchbox input:checked+.BP_Swtch {
  box-shadow: 0 0 0 0.375em #58b14c inset
}

.BP_swtchbox input:checked+.BP_Swtch .BP_Swtbx_lb {
  left: calc(100% - 0.875em);
  left: -ms-calc(100% - 0.875em);
  left: -moz-calc(100% - 0.875em);
  left: -webkit-calc(100% - 0.875em)
}
<div class="parent">
  <label class="BP_swtchbox" for="BPSwitch">
    <input type="checkbox" id="BPSwitch" class="hide">
      <label class="BP_Swtch" for="BPSwitch">
        <span class="BP_Swtbx_lb"></span>
      </label>
  </label>
</div>

Here is the screenshot for font size of 20px for parent class.....for switch icon

enter image description here

What to do for that....

Upvotes: 3

Views: 876

Answers (1)

Lennholm
Lennholm

Reputation: 7480

This is very interesting. It appears that when .parent has a font-size of 20px, the width and height of .BP_Swtbx_lb (which are both expressed as 0.875em) gets calculated to 17.5 pixels. Since pixels can't be fractional they get rounded, but the weird thing here is that the height get rounded down to 17 while the width get rounded up to 18.

When .parent has a font-size of 22px, it appears to be the complete opposite, height gets rounded up and width gets rounded down. They should definitely both be unambiguously rounded down in this case since it's calculated to 19.25 pixels.

The odd shape seems to be caused by the curve being calculated from the non-rounded values rather than the rounded values. Compare the shape when setting the non-rounded values to when explicitly setting the rounded values, it's slightly rectangular in the former case and perfectly elliptical in the latter. So there's an inconsistency between the rendered curve and rendered dimensions.

This only seems to be the case in Chrome. Neither Safari nor Firefox display this behavior.
Now, it's up to the browser implementation how it rounds fractional pixels, but you'd think it would at least be internally consistent. I'm willing to conclude that this is a browser bug and it should be reported as such to the Google Chrome dev team.

Upvotes: 2

Related Questions