PDA

View Full Version : Zoom with absolute layout does not work correctly in firefox



fabio.policeno
13 Nov 2013, 6:25 AM
When applying style with zoom (transform to firefox) the panels are not displayed in the correct place as is done in chrome. If you remove the style , works perfect on both.


Ext.widget('panel', {
width: 200,
height: 200,
renderTo: Ext.getBody(),
layout: 'absolute',
items: [{
xtype: 'panel',
html: 'panel 1',
style: 'zoom: 0.1; -moz-transform: scale(0.5); -moz-transform-origin: 0 0;',
width: 150,
x: 100,
y: 100
},{
xtype: 'panel',
html: 'panel 2',
style: 'zoom: 0.1; -moz-transform: scale(0.5); -moz-transform-origin: 0 0;',
width: 150,
x: 150,
y: 150
}]
});



Chrome (correct):
http://f.cl.ly/items/1w0K0q2E1K0V2Z411117/Captura%20de%20Tela%202013-11-13%20%C3%A0s%2012.14.06.png


Firefox:
http://f.cl.ly/items/1P2m0i1R3c2g1s2m1m3d/Captura%20de%20Tela%202013-11-13%20%C3%A0s%2012.14.28.png


Thank's!

fabio.policeno
14 Nov 2013, 7:55 AM
Reasonable solution:



Ext.widget('panel', {
width: 200,
height: 200,
renderTo: Ext.getBody(),
layout: 'absolute',
items: [{
xtype: 'panel',
html: 'panel 1',
style: 'zoom: 0.1; -moz-transform: scale(0.5); -moz-transform-origin: 0 0;',
width: Ext.isGecko ? 30 : 150,
x: Ext.isGecko ? 100/10 : 100,
y: Ext.isGecko ? 100/10 : 100
},{
xtype: 'panel',
html: 'panel 2',
style: 'zoom: 0.1; -moz-transform: scale(0.5); -moz-transform-origin: 0 0;',
width: Ext.isGecko ? 30 : 150,
x: Ext.isGecko ? 150/10 : 150,
y: Ext.isGecko ? 150/10 : 150
}]
});

Gary Schlosberg
14 Nov 2013, 9:49 PM
Thanks for taking the time to share your solution with the community.