[英]css3 transform not rendering properly on chrome (works on firefox)
I have a div, on which I am applying css3 transform to make it look 3d & these transforms change as per the mousewheel
events. 我有一个div,在其上应用css3转换以使其看起来为3d,并且这些转换根据mousewheel
事件而变化。
First look at the div (the brown board with dots) in normal state: 首先查看正常状态下的div(带点的棕色木板):
Now I apply this small css code to transform it! 现在,我将使用此小型CSS代码对其进行转换!
.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: 但是它不能以预期的方式工作,这就是它在chrome上的渲染方式:
But on Firefox this work well without issue: 但是在Firefox上,它运行良好,没有问题:
Here is link to hosted site : http://www.buildactivityboard.com/how-it-works 这是指向托管站点的链接: 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! 相信我,这在Chrome上也可以正常使用! I don't know what happened now to cause this problem. 我不知道现在发生了什么导致此问题。 I've checked this on Mac & Windows, behaviour remains same! 我已经在Mac和Windows上进行了检查,行为仍然相同!
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 https://bugs.chromium.org/p/chromium/issues/detail?id=20574
Either adding perspective: 1000px
to body
or .master-board
works. 添加perspective: 1000px
body
或.master-board
作品添加perspective: 1000px
。
EDIT: According to this post , seems like it's caused by a conflict between 3d transforms and position:fixed. 编辑:根据这篇文章 ,似乎是由3d转换和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/ 我创建了一个小提琴来重现此问题: https : //jsfiddle.net/uuhqsw57/
Adding perspective to its nearest parent helped solve the issue. 向最接近的父级添加视角有助于解决此问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.