比例变换导致与柔性布局的渲染间隙

Question

我正在使用柔性布局以呈现具有3个均匀大小的列的容器DIV。它正如我所期望的那样工作，直到我应用一个缩放变换。当容器缩小时，内容框之间出现细缝。这个问题发生在MacOS Chrome和Safari上，但不是Firefox。我相信我看到了渲染错误，但是想知道是否有人可能有解决方法的想法。

这里有一个大大简化例子演示了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>

周围

Answer 1

请考虑解决该问题与CSS盒子阴影。

以下是使用box-shadow属性的值spread-radius的示例。

body { 
 
    background: black; 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    height: 200px; 
 
} 
 

 
.column { 
 
    flex-grow: 1; 
 
    background: #ff0000; 
 
} 
 

 
.scale { 
 
    transform: scale(0.703125); 
 
    overflow: hidden;     /* new */ 
 
} 
 

 
.scale>div:nth-child(2) { 
 
    box-shadow: 0 0 0 1000px #ff0000; /* new */ 
 
} 
 

 
.column:nth-child(2) { 
 
    background: orange;    /* easier to see */ 
 
}

<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>

下面是这个方法是如何工作的详细解释：

• On hover of child, change background color of parent container (CSS only)

Answer 2

的一种方法是使用该元素相匹配的颜色之一的背景，所以页面的背景不显示在元素之间。

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), .scale { 
 
    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>