Pull refresh demo shows black square

[realjax]

Well, like the title says. The demo online (http://dev.sencha.com/deploy/touch/examples/pullrefresh/) shows a black square when pulled down instead of some arrow image. 's probabaly not right...

Edit: when viewed in Chrome that is.

[mitchellsimoens]

Looks fine on my Chrome browser. Look at dev tools to see if it's not applying the css.

[heringsfilet]

When it says "Release to refresh..." there is a black box, when it says "Pull down to refresh..." there is the arrow. At least in my case :)

I use Google Chrome 10.0.648.204

[mitchellsimoens]

Guess it is a Chrome 10 bug because Chrome 11 is fine...

[realjax]

The only 11 version I could find was the beta.

But in my 11.0.696.43 beta version there's the same square block...

[mitchellsimoens]

http://www.simoens.org/videos/PullRefresh.mp4

Screencast taken using Chrome 11.0.696.43 beta on Mac OS X 10.6.7

Notice I did refresh the browser before interacting with the List.

[maertsch]

I got Chrome 11.0.696.50 Beta on Windows and it also shows the black square.
I think the alpha-channel is messed up in chrome.

May it works on chrome on mac.

Since it works on Safari and Android-Browser it should be a Chrome bug and not a Sencha-Touch bug.

edit: i guess its this chrome issue: http://code.google.com/p/chromium/issues/detail?id=66372
a workaround is to embed the image as background instead as alpha-mask.

change the following lines in sencha-touch.css (line 4218 in debug.css):
.x-list-pullrefresh-arrow{
width:2.5em;
height:4.5em;
-webkit-mask:center center url('data:image/png;base64,iVBORw0..... no-repeat;
-webkit-mask-size:2em 3em;
-webkit-transform:rotate(0deg);
background-color:#111
}

to

.x-list-pullrefresh-arrow{
width:2.5em;
height:4.5em;
background:center center url('data:image/png;base64,iVBORw0..... no-repeat;
-webkit-transform:rotate(0deg);
}



regards

[mitchellsimoens]

Since it works on Safari and Android-Browser it should be a Chrome bug and not a Sencha-Touch bug.

I have Chrome 11 beta on Mac and it works may not be 100% of the problem.

[maertsch]

I have Chrome 11 beta on Win and it doesn't work. maybe there is a difference between chrome on win and chrome on mac...

my workaround should work on all devices i guess.

[realjax]

It shows the same faulty behaviour in a webview activity @ Android 3.1 which afaik is webkit, not chrome..

[edspencer]

Thanks for the report and suggested workaround, I've put this into our bug tracker

[rdougan]

This has been fixed in Sencha Touch 2 and will be available in the next release.