I'm using flex layout in order to render a container div with 3 evenly sized columns. It works just as I'd expect, until I apply a scale transform. When the container is scaled down, thin gaps appear between the content boxes. The issue happens on MacOS Chrome and Safari, but not Firefox. I believe I'm seeing a rendering bug, but wondering if anyone might have ideas for a workaround.
Here's a greatly simplified example which demonstrates the problem in Chrome:
body {
background: black;
margin: 0;
}
.scale {
transform: scale(0.703125);
}
.container {
display: flex;
width: 600px;
height: 200px;
}
.column {
flex-grow: 1;
background:#ff0000;
}
.column:nth-child(2) {
background: #ff3333;
}
<div class="container scale">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<div class="container">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>