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

Posted 2023-03-06

【中文标题】转换原点 (css) Chrome (88) 错误

【英文标题】：transform-origin (css) Chrome (88) bug

【发布时间】：2021-05-06 14:48:51

【问题描述】：

有几个来源以不同的方式描述了这个问题，但它们过于复杂（大量的 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'被考虑并影响它的话.

这个问题听起来像这样：

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

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

【参考方案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

【讨论】：

嗯...这确实解决了我的“问题”，尽管它没有回答为什么 Mozilla 在这种情况下表现得更容易预测。非常感谢！我觉得自己很愚蠢，因为在这个问题上浪费了一整天，但事实证明这根本不是问题，只是我的粗心。

默认不是左上角，是居中

知道为什么 Firefox 使用 OP 的代码吗？ （我已经验证过。）MDN says 默认是50% 50% 0，而不是left bottom。 （另外：记住 CSS 不支持 // cmets。）

@TemaniAfif 哦，是的，原来如此...我使用 SVG 太久了！

@T.J.Crowder 这是一个 chrome 错误，转换应该适用于 transform 和 transform-origin。 Chrome 没有处理后者。顺便说一句，如果你将过渡移动到主元素，它会在类被移除时起作用（所以只能在一个方向上工作）