转换原点 (css) Chrome (88) 错误

Question

有几个来源以不同的方式描述了这个问题，但它们过于复杂（大量的 js）和狭隘的焦点。并且没有明确的答案为什么会发生以及为什么谷歌现在没有修复它。

我决定做一个最简单的例子。在这里，再次在 sn-p 中：https://codepen.io/backtosoulfire/pen/vYyOJJe

如果您是 Mozilla 用户（我猜不仅仅是 Mozilla），您不会发现任何奇怪和不寻常的东西。但是，如果您正在使用 Chrome 浏览互联网，请尝试按标记的块。

我们有一点过渡时间和一个特定的变换原点属性。

let element = document.querySelector('.menu-btn');

element.onclick = function() {
  element.classList.toggle('menu-btn_active');
};

.section {
    width: 300px;
    height: 300px;
    background-color: cyan;
    position: relative;
}

.menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
    width: 100px;
    height: 30px;
    background-color: black;
    position: absolute;
    top: 50%; margin-top: -15px;
    left: 50%; margin-left: -50px;
}

.menu-btn_active {
    transform: rotate(-90deg);
    transition: 0.5s;
    transform-origin: left bottom;
}

p {
  color: white;
  text-align: center;
}

<div class="section">
  <div class="menu-btn">
    <p>Press me</p>
  </div>
</div>

你会发现旋转是在没有考虑'transform-origin'属性的情况下进行的，并且在动画结束时，块突然“跳跃”到一个位置，如果'transform-origin'被考虑并影响它的话.

这个问题听起来像这样：

1. 为什么会这样？
2. 有没有简单的方法（如示例一样简单）来修复它？
3. 应该有人联系 Chrome 开发人员解决这个问题吗？因为我们可以在几年前找到这个错误的一些复杂示例。

附：我忘了分享一些“奇怪的”“功能”。如果我们在第二类调整元素的宽度，Chrome 就会开始像它想象的那样“渲染”它。只有当元素的宽度相同时，问题才会存在。

Answer 1

这不是错误，transform-origin 应该在您的原始类声明中：

.menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
    width: 100px;
    height: 30px;
    background-color: black;
    position: absolute;
    top: 50%; margin-top: -15px;
    left: 50%; margin-left: -50px;
    transform-origin: left bottom; // add here
}

.menu-btn_active {
    transform: rotate(-90deg);
    transition: 0.5s;
    transform-origin: left bottom; // remove here
}

最初，transform-origin 是默认设置的。该默认值为center center。您向项目添加一个类，添加类后，将位置更改为left bottom，因此跳转。

https://codepen.io/EightArmsHQ/pen/f7b4dab6b40a1ff945b79e11c4ce6863?editors=1100