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!

CSS3 isnt a standard yet, browsers implement the features as they think it should, which may result in unexpected results. — Martijn, May 11 '17 at 08:04
For older versions maybe use `-webkit-transform-style`, `-webkit-transform-origin` and `-webkit-transform`. — Huelfe, May 11 '17 at 08:05
I am using Google Chrome Version 58.0.3029.110 (64-bit) on OSX El Capitan 10.11.6 — demonofthemist, May 11 '17 at 08:06

Gerard · Accepted Answer · 2017-05-11T08:29:06.570

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

edited May 11 '17 at 08:29

answered May 11 '17 at 08:22

Gerard

15,418
5
30
52

Thanks, it did worked, I knew that fixed divs behave weird when ancestor in transformed, but I was unable to relate it here! – demonofthemist May 11 '17 at 08:50

score 0 · Answer 2 · edited May 23 '17 at 12:26

0

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.

edited May 23 '17 at 12:26

Community

1
1

answered May 11 '17 at 08:05

Richard Yan

1,276
10
21

Yes it worked, but I've added `perspective:1000px` to `.hw-master` div, parent div of the board! – demonofthemist May 11 '17 at 08:09
Checking your css, wait a min – Richard Yan May 11 '17 at 08:11
Adding the perspective to `.master-board` also works. Seems like the inheritance failed to work, probably some sort of chromium bug here. According to @Gerard, maybe the position is the cause of the bug. – Richard Yan May 11 '17 at 08:27
Yes, thanks, It surely a bug, thats why it was working previously, then my chrome updated itself :) – demonofthemist May 11 '17 at 08:51
Most of the time, this problem (pespective is lost when set in the grand-parent) arises from a missing transform-style: preserve-3D in the middle element (the parent of the transformed element, the son of the pespective element) – vals May 11 '17 at 11:21
@vals IMHO, I don't quite agree with your idea. Missing preserve-3D only treats the 3D object as a 2D representation of the object - like a cube on a paper, instead of an actual cube. Perspective on the other hand has do deal with resizing of some the surfaces and the actual rendering. – Richard Yan May 11 '17 at 12:04

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

2 Answers2