javascript - 使用 CSS 缩放/矩阵不会使背景与元素保持对齐

Question

我有一个带点背景的 div。有一些子元素。如果我应用以下 CSS:

transform:scale(x);

然后元素不再与背景对齐，即使该比例设置为 1(我也尝试过使用此转换:matrix(...))。

我做了一个 fiddle 来演示我的意思: 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"?