css3 变换无法在 chrome 上正确呈现（适用于 firefox）

Question

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

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

现在我应用这个小css代码来改造它！

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

你能猜到这段代码会做什么，对吧？但它没有以预期的方式工作，这是它在 chrome:

上的呈现方式

但是在 Firefox 上这个工作很好没有问题:

这里是 link 托管站点：http://www.buildactivityboard.com/how-it-works

任何人都可以指导我我做错了什么，这似乎是一个愚蠢的问题，但我找不到我做错了什么。

注：

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

Answer 1

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

编辑：根据 this post，这似乎是由 3d 变换和 position:fixed 之间的冲突引起的。 Chromium 错误跟踪器将此问题标记为 "wont fix".

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

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

Answer 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

css3 变换无法在 chrome 上正确呈现（适用于 firefox）

css3 transform not rendering properly on chrome (works on firefox)

javascript

css

css-transforms