Question

我有一个带有虚线背景的div。有一些儿童元素。如果我应用以下CSS：

transform:scale(x);

然后元素不再与背景对齐，即使该比例设置为1（我也尝试使用此变换：matrix（...））。

我做了一个小提示来证明我的意思： 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。基本上，通过添加转换，它似乎就像你已经隐式地将position:relative应用于.toTransform 一样。

所以，如果你最初这样做，添加/删除转换不应该干扰，IE，

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

现在无论你是否有变换，广场的位置都不会受到影响。

可能相关：Why does "position: relative" interfere with "transform: scale"?

使用CSS Scale / Matrix不会使背景与元素保持一致

1 个答案: