ARTICLE AD BOX
Consider the following code snippet. When the scale is set to more than 0.5, the outline is visible. When it is less than 0.5, the outline is missing. At exactly 0.5, the outline is strangely only visible on the right and bottom sides. This issue only occurs in Firefox.
https://codepen.io/dphdmn-tranquilcorn/pen/zxovByY
Using box-shadow: 0 0 0 1px black; or border gives similar issue.
If base size is small, and scale is always more than 1, there seems to be no issue.
.tile {
display: flex;
flex-direction: column;
align-items: center;
width: 100px;
}
.rect {
width: 100px;
height: 100px;
background: #D3D3D3;
outline: 1px solid black;
}
.label {
font-size: 0.7rem;
font-family: monospace;
}
<div class="tile"><div class="rect" style="transform:scale(0.48)"></div><span class="label">0.48</span></div>
<div class="tile"><div class="rect" style="transform:scale(0.5)"></div><span class="label">0.50</span></div>
<div class="tile"><div class="rect" style="transform:scale(0.52)"></div><span class="label">0.52</span></div>
