css3 转换无法在 chrome 上正确渲染（适用于 firefox）答案

【问题标题】：css3 transform not rendering properly on chrome (works on firefox)css3 转换无法在 chrome 上正确渲染（适用于 firefox）
【发布时间】：2017-10-10 02:43:39
【问题描述】：

我有一个 div，我在其上应用 css3 变换以使其看起来像 3d 并且这些变换会根据 mousewheel 事件发生变化。

先看正常状态下的div（带点的棕板）：

现在我应用这个小的 css 代码来转换它！

.board-class{
    transform-style: preserve-3d;
    transform-origin: center top;
    transform: translateY(0) rotateX(30deg);
}

你可以猜到这段代码会做什么，对吧？但它不能以预期的方式工作，这就是它在 chrome 上呈现的方式：

但在 Firefox 上，这可以正常工作，没有问题：

这里是托管网站的链接：http://www.buildactivityboard.com/how-it-works

谁能指导我做错了什么，这似乎是一个愚蠢的问题，但我无法找出我做错了什么。

注意：

相信我，这在 Chrome 上也可以正常工作！我不知道现在发生了什么导致这个问题。我在 Mac 和 Windows 上检查过，行为保持不变！

【问题讨论】：

在 chrome 中看起来不错。
CSS3 还不是标准，浏览器会按照自己的想法实现这些功能，这可能会导致意想不到的结果。
似乎在 Chrome 上对我来说工作正常。（第 52 版）
对于旧版本可能使用-webkit-transform-style、-webkit-transform-origin 和-webkit-transform。
我在 OSX El Capitan 10.11.6 上使用 Google Chrome 版本 58.0.3029.110（64 位）

标签： javascript css css-transforms

【解决方案1】：

将perspective: 1000px 添加到body 或.master-board 都可以。

编辑：根据this post，似乎是由 3d 变换和位置：固定之间的冲突引起的。铬错误跟踪器将此问题标记为“无法修复”。

我创建了一个小提琴来重现这个问题： https://jsfiddle.net/uuhqsw57/

向其最近的父级添加透视有助于解决问题。

【讨论】：

是的，它有效，但我已将 perspective:1000px 添加到 .hw-master div，即董事会的父 div！
检查你的CSS，稍等
将透视图添加到.master-board 也可以。似乎继承失败了，可能是某种铬错误。根据@Gerard 的说法，这个位置可能是导致该错误的原因。
是的，谢谢，这肯定是一个错误，这就是它以前工作的原因，然后我的 chrome 自己更新了 :)
大多数时候，这个问题（在祖父中设置时会丢失透视）是由于缺少变换样式：中间元素中的preserve-3D（变换元素的父元素，透视元素的儿子）

【解决方案2】：

将位置从静态更改为绝对可以解决问题：

.master-board .widget-board {
  width: 750px;
  height: 300px;
  padding: 0;
  position: absolute;
  left: 50vw;
  top: 50vh;
  margin: -96px 0 0 -375px;
  z-index: 1000;
  transition: all 1.5s;
}

https://bugs.chromium.org/p/chromium/issues/detail?id=20574

【讨论】：

谢谢，它确实奏效了，我知道固定 div 在祖先转换时会表现得很奇怪，但我无法在这里联系起来！