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

Question

我有一个div，我正在应用css3变换使其看起来像3d＆amp;这些转换根据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＆amp;上检查过这个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

Answer 2

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

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

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

向最近的父母添加视角有助于解决问题。