PDA

View Full Version : [FIXED] Pull refresh demo shows black square



realjax
11 Apr 2011, 11:26 PM
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
12 Apr 2011, 6:18 AM
Looks fine on my Chrome browser. Look at dev tools to see if it's not applying the css.

heringsfilet
12 Apr 2011, 10:22 PM
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
13 Apr 2011, 4:34 AM
Guess it is a Chrome 10 bug because Chrome 11 is fine...

realjax
13 Apr 2011, 6:53 AM
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
13 Apr 2011, 7:00 AM
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
18 Apr 2011, 11:51 PM
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
19 Apr 2011, 5:21 AM
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
19 Apr 2011, 5:23 AM
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
4 Jul 2011, 11:37 PM
It shows the same faulty behaviour in a webview activity @ Android 3.1 which afaik is webkit, not chrome..

edspencer
14 Jul 2011, 4:21 PM
Thanks for the report and suggested workaround, I've put this into our bug tracker

rdougan
2 Feb 2012, 1:14 PM
This has been fixed in Sencha Touch 2 and will be available in the next release.