Seltsam border-width Verhalten in Chrom - Floating-point border-width?

Zu reproduzieren das problem habe ich zum ändern der zoom-Stufe von Chrome. Ändern der zoom-level wieder zu 100% behoben werden. Es scheint ein Fehler zu sein, der berechnete Rahmenbreite ist immer kleiner als die definierte Grenze der Breite vergrößern oder verkleinern!

Ihrem 10px border hat einen Wert von 10, wenn der zoom-level ist 110%, aber auf 125%, es hat das gleiche problem wie Ihr 3px Grenze.

edit: firefox hat das gleiche Verhalten!

Tut-Einstellung box-sizing auf border-box für alle Elemente überhaupt helfen? Dies wird sich ändern die Weise, die das box-Modell berechnet wird, wo die Grenze und padding wirken sich nicht auf die Breite.

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

Hatte ich nur ein weiteres Beispiel dieses mit Chrom (Chrom 76), verursacht durch eine transform: translate().

<div class='container'>
    <div class="box-triangle"></div>
</div>

.box-triangle hat eine ::after element der Gestaltung einer Dreiländereck, die absolut positioniert auf der Oberseite der .box-triangle (direkt nach dem Auffüllen).
Wenn ich ein übersetzen mit % auf .container und der sich ergebende Prozentsatz ist nicht eine ganze Zahl, dann .box-triangle Grenze zeigen leicht unter seiner ::after element.

Lösungen : Mit einer px übersetzen anstatt in %, oder machen Sie sicher, dass der Anteil der container-dimension eine ganze Zahl

Bearbeiten : genau das gleiche passieren, wenn die Transformation direkt angewendet auf .box-triangle (siehe letztes Beispiel im snippet)

CSS:

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  min-height: 100vh;
  width: 100%;
  background-color: #e55039;
  font-size: 16px;
}

.box-triangle {
  position: relative;
  margin: 0;
  color: #f7f1e3;
  background-color: #227093;
  font-size: 20px;
  margin: 0;
  padding: 1em;
  border: 5px solid white;
}

.box-triangle::after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  margin: 0;
  border: solid transparent;
  left: 50%;
  bottom: 100%;
  border-bottom-color: #227093;
  border-width: 1.5em;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

[class^='container'] {
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container-1 {
  position: relative;
  height: 10.5rem;
  width: 20rem;
  /* transform: translate(1%, 1%); */
}

.container-2 {
  position: relative;
  height: 10.5rem;
  width: 20rem;
  transform: translate(0, 5%);
}

.container-3 {
  position: relative;
  height: 10rem;
  width: 20rem;
  transform: translate(0, 5%);
}

.container-4 {
  position: relative;
  height: 168px;
  width: 320px;
  transform: translate(0, 5%);
}

.container-5 {
  position: relative;
  height: 168px;
  width: 320px;
  transform: translate(0, 8px);
}

.noContainer {
  position: relative;
  height: 168px;
  width: 320px;
  transform: translate(0, 5%);
}

HTML:

<div class='container-1'>
  <div class="box-triangle">no translate + container height: 10.5 rem (168px)</div>
</div>

<div class='container-2'>
  <div class="box-triangle">translate(0, 5%) + container height: 10.5 rem (168px)</div>
</div>

<div class='container-3'>
  <div class="box-triangle">translate(0, 5%) + container height: 10rem (160px)</div>
</div>

<div class='container-4'>
  <div class="box-triangle">translate(0, 5%) + container height: 168px</div>
</div>

<div class='container-5'>
  <div class="box-triangle">translate(0, 8px) + container height: 168px</div>
</div>

<div class="box-triangle noContainer">No container + translate(0, 5%) + height: 168px</div>