使用CSS Scale / Matrix不會使背景與元素保持一致

Question

我有一個帶有虛線背景的div。 有一些兒童元素。 如果我應用以下CSS：

transform:scale(x);

然后元素不再與背景對齊，即使該比例設置為1（我也嘗試過這種變換：矩陣（...））。

我做了一個小提琴演示我的意思： https ： //jsfiddle.net/gawdhfpc/

 .container { width: 500px; height: 500px; background: blue; } .toTransform { width: 100%; height: 100%; background-image: radial-gradient(black 3px, white 3px); background-size: 100px 100px; /* comment to see what it should look like */ transform: scale(1); } .child { height: 100px; width: 100px; background: red; position: absolute; top: 258px; left: 258px; } 

 <div class="container"> <div class="toTransform"> <div class="child"> </div> </div> </div> 

如果刪除變換css，您將看到該子項與背景上的點對齊。 一旦轉換適用，孩子就會移動並且不再與點對齊。 為什么會這樣？ 有辦法解決這個問題嗎？ 我需要讓用戶放大/縮小，我一直在使用D3和縮放/翻譯。

Answer 1

我有一個解決方案，但我實際上並不知道是什么導致了潛在的問題。

你的紅色方形孩子的position:absolute ，但它沒有父母的position:relative ，所以它的位置絕對與文檔本身有關。 當您應用變換時，無論出於何種原因，它都會相對於.toTransform絕對定位，在您的示例中，由於自然邊距和填充，在文檔中距離文檔大約10 px。 . 從本質上講，通過添加變換， 。

所以，如果你最初這樣做，添加/刪除轉換不應該干擾，IE，

.toTransform {
  position:relative;
}
.child {
  /* drop each value by ~10px */
  top: 248px;
  left: 248px;
}

現在無論你是否有變換，廣場的位置都不會受到影響。

可能相關： 為什么“位置：相對”會干擾“變換：規模”？