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

Question

I have a div, on which I am applying css3 transform to make it look 3d & these transforms change as per the mousewheel events.

First look at the div (the brown board with dots) in normal state:

Now I apply this small css code to transform it!

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

you can guess what this code will do, right? But it does not work in expected way, this is how it renders on chrome:

But on Firefox this work well without issue:

Here is link to hosted site : http://www.buildactivityboard.com/how-it-works

Can anyone guide me what I am doing wrong, this seems like a silly issue but I can't find out what I am doing wrong.

Note:

Believe me, this used to work without issue on Chrome too! I don't know what happened now to cause this problem. I've checked this on Mac & Windows, behaviour remains same!

Answer 1

Changing the position from static to absolute fixes the issue:

.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

Either adding perspective: 1000px to body or .master-board works.

EDIT: According to this post , seems like it's caused by a conflict between 3d transforms and position:fixed. The chromium bug tracker marked this issue as "wont fix".

I've created a fiddle to reproduce this issue: https://jsfiddle.net/uuhqsw57/

Adding perspective to its nearest parent helped solve the issue.