比例變換導致與柔性佈局的渲染間隙

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>