javascript - 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 上这很好用，没有问题:

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

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

注意:

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

Answer 1

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

.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