webkit变换规模制作项目消失 [英] webkit transform scale making items disappear

问题描述

我正在尝试在HTML页面中缩放div。这个div包含很多canvas元素和其他div元素。基本上，此div充当页面中所有其他项的容器。使用Chrome23.0.1271.95 m和IOS6.0 safari，缩放后不会显示此div右侧和底部的项目。如果我调整窗口大小（或更改iPad上的方向），div会正确缩放并开始显示项目，但在一定大小后会再次消失。

I am trying to scale a div in my HTML page. This div contains a lot of canvas elements and other div elements. Basically this div acts as the container for all other items in the page. With Chrome "23.0.1271.95 m" and IOS6.0 safari, the items present on the right and the bottom part of this div do not appear after scaling. If I resize the window (or change the orientation on iPad), the div scales correctly and the items begin to appear, but again disappear after a certain size.

这个使用过使用IOS 5.0和以前的chrome / safari版本可以正常工作。这是最新webkit版本中的错误吗？另外，是否有任何解决方法可以避免这种行为？

This used to work fine with IOS 5.0 and previous chrome/safari versions. Is this a bug in latest webkit version? Also, is there any workaround to avoid this behavior?

推荐答案

我有一个长期的解决方案，但忘了更新这个帖子。这是因为chrome完成了图层组合。请添加translate3d（0px，0px，0px）;在变换字符串中。添加此项将为项目创建一个新图层，并将修复问题。 :)
在此处阅读有关图层合成的更多信息： http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

I had got a solution for this long back but forgot to update this post. This happens because of layer compositioning done by chrome. Please add translate3d(0px, 0px, 0px); in the transform string. Adding this will create a new layer for the item and issue will be fixed. :) Read more about layer compositioning here : http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

这篇关于webkit变换规模制作项目消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！