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

Answer 2

添加perspective: 1000px body或.master-board作品添加perspective: 1000px 。

編輯：根據這篇文章 ，似乎是由3d轉換和position：fixed之間的沖突引起的。 鉻錯誤跟蹤器將此問題標記為“無法修復”。

我創建了一個小提琴來重現此問題： https : //jsfiddle.net/uuhqsw57/

向最接近的父級添加視角有助於解決此問題。