DatePicker not positioning correctly in Chrome and showing a white mask.

[Albareto]

I have a DatePicker (new Ext.DatePicker) in a form (html, not ExtJS) and when showing the component (I have attached a function to the show event) I move it in the screen to fit the correct position. This seems to work in IE, FF and Safari but not in Chrome (using latest version, 20.something), this is very weird because when I try to inspect the element with the inspector it automatically moves it to the correct position.

So check the images, with FF happens this:
FF.png
Which is correct.

Then with Chrome it shows it under the date field, making my screen bigger, ok, no problem as far as it is visible:
chrome1.png

The problem is that when I hover the DatePicker gets white:
chrome2_hocer.png

And if I click in the developer tools it moves to the correct position and removes the white thing, this is extremely weird and annoying, I cannot really debug what's going on or why is doing that.


chrome3.png

Do someone knows where is this white thing coming from or why the DatePicker is not positioning correctly?

This is the code I use to position it:

show : function (datePicker)
            {
                var content = Ext.get('Content');
                      h = content.getHeight(),
                        w = content.getWidth(),
                        tar = Ext.get('pos'+target.id),
                        tarPosTop = tar.getTop(),
                        tarPosLeft = tar.getLeft(),
                        dpEl = datePicker.getEl(),
                        dpWidth = dpEl.getWidth(),
                        dpHeight = dpEl.getHeight();

                    if (tarPosTop + dpHeight > h)
                    {
                        datePicker.getEl().setY((h - dpHeight));
                    }
                    else if (Ext.isChrome)
                    {
                        datePicker.getEl().setY(tarPosTop);
                    }
                    if (tarPosLeft + dpWidth > w)
                    {
                        datePicker.getEl().setX((tarPosLeft - dpWidth));
                    }
                    else
                    {
                        datePicker.getEl().setX(tarPosLeft + 30);
                    }
                }
            }

You can already see that there is some tricking for Chrome. This code works correct for IE, FF and Safari, and AFAIK this was working in the past also with Chrome but somehow it's stopped working.
I have tried things like setStyle instead of setX and setY and also focus() just in case was a strange issue with focusing but result is the same. I think that the main problem is in the positioning, once it is in the correct position it does not show this white mask, so if there is any way of forcing the element to pick some position might help.

Any help would be much appreciated.

[scottmartin]

Are you using 3.4? Please provide a small working example that we can use to verify. It seems you are making adjustments.

Scott.