Layout corruption with ExtJs 4.1 and Chrome 25

2
votes

I have posted this on the sencha forums as a bug, but I figured getting it out on stack overflow could be advantageous:

http://www.sencha.com/forum/showthread.php?257622-Serious-layout-Issue-with-ExtJs-4.1-and-Chrome-25&p=943170#post943170

and a screenshot of it in action can be seen here:

http://www.sencha.com/forum/showthread.php?257508-Strange-behaviors-in-Chrome-25-with-Ext-4.1

Basically, with ExtJs 4.1, after upgrading to Chrome 25, our users are sporadically seeing layout failure in our application.

It usually is noticed by the window 'close' button appearing skewed on the left of a window instead of the right, and all the form fields displayed vertically. Once it happens, every subsequent component that is rendered is all messed up.

Reverting to chrome 24, or using Firefox makes the problem dissipate. The issue shows up in IE when running Chrome Frame 25.

We have disabled our custom CSS, and still seen the issue.

Any ideas?

2
google-chromelayoutextjs
This is very hard to help without having a testcase, or some example code. I've never seen a problem like this before by upgrading browser (I've seen this when upgraden from 4.0.x to 4.1). But you didn't upgrade ExtJS right? – Johan Haest
Didn't upgrade extjs but the first link has a test case. – John Helfert

2 Answers

2
votes

Amphro's answer does address the issue, but doesn't completely eradicate it.

The only real solution I have found is to upgrade to ExtJs 4.2.

I can still replicate the issue with ExtJs 4.1.2 in Chrome 26 as well.

1
votes

We were experiencing a similar issue with our Ext application. We finally narrowed it down to floating numbers in the height and width of panels. For example, if you have any code that looks like panel.setWidth(v1 / v2), change it to panel.setWidth(Math.round(v1 / v2)). Hope that helps.