webkit transform scale making items disappear

5
votes

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.

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?

1
ipadwebkitios6scaletransformwebkit-transform
has anybody faced this issue? – hello512
I am facing the same issue. In chrome (currently testing 40.0.2214.38 beta-m) I have disapearing elements if i use transform: scale(). Items start disappearing just over scale(1) – matrixsmurfen
I'm facing this problem at 1.5X scale. It causes video to sit on top of over elements in webkit browsers. Any transform I apply causes the other elements to disappear above 1.5X scale. – Justin Putney

1 Answers

11
votes

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