3D转换解决问题

Question

当我在父元素上设置透视图时对元素使用X或Y旋转时，变换元素的分辨率似乎会降低到原始元素的拉伸位图版本，而不是维持自己的分辨率。 / p>

当移除X / Y旋转时，不会发生这种失真。在不降低分辨率的情况下，Z旋转似乎处理得很好。如果关闭透视，分辨率似乎也正常。

实施例： http://dabblet.com/gist/4068590

/* # Bug # */
/* Removing the perspective gets rid of the resolution drop */
body { perspective: 200px; }

/*/ 
 * X and Y rotations cause the resolution to drop
 * while the Z rotation doesn't 
/*/
#test {
    transform: scaleX(5) scaleY(5) rotateX(2deg);
}

这似乎发生在Firefox，Chrome和Safari（XP）中。有什么方法可以解决这个问题吗？ （除了增加原始元素的大小然后缩小它）

Answer 1

我相信你正在遇到GPU与非GPU转换。当某些东西被交给GPU时，它需要光栅化的副本，然后拉伸，挤压和插入像素。由于由浏览器决定将什么交给GPU，你必须让jedi介意欺骗浏览器不进行GPU卸载（YMMV）。或者，如您所知，使用大型元素/图像并设置最大比例= 1。