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

Question

有几个来源以不同的方式描述了这个问题，但它们太复杂（很多 js）并且重点狭窄。并且没有明确的答案为什么会发生以及为什么 Google 到现在还没有修复它。

我决定做一个最简单的例子。这是下面的片段：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' 是考虑到并影响了它。

问题听起来像这样：

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

P.S。我忘了分享一些“奇怪”的“功能”。如果我们在第 class 秒调整元素的宽度，Chrome 开始“渲染”它所设想的那样。仅当元素宽度相同时问题才会存在。

Answer 1

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

.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。您向项目添加一个 class，并且在添加 class 之后 ，将位置更改为 left bottom，因此跳转。

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

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

transform-origin (css) Chrome (88) bug

css

google-chrome

css-transitions

css-transforms