hi all,
when I change from alpha 3 to alpha 4, the right arrow icon at the right of an unsorted list item disappears on my samsung galaxy tab when I use a local jquery.mobile-1.0a4.css file (I see solid filled grey circles in stead). When I go to the jquery mobile demo website it is ok, but when I rebuild the jquery demo website locally the arrow is gone. I found out that if I comment out three lines in the jquery.mobile-1.0a4.css file the arrow is show again:
So when I use this original code from the jquery.mobile-1.0a4.css file I do not see the arrow (so the problem exists):
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dpi)
{
.ui-icon-plus,
.ui-icon-minus,
.ui-icon-delete,
.ui-icon-arrow-r,
.ui-icon-arrow-l,
.ui-icon-arrow-u,
.ui-icon-arrow-d,
.ui-icon-check,
.ui-icon-gear,
.ui-icon-refresh,
.ui-icon-forward,
.ui-icon-back,
.ui-icon-grid,
.ui-icon-star,
.ui-icon-alert,
.ui-icon-info,
.ui-icon-home,
.ui-icon-search,
.ui-icon-checkbox-off,
.ui-icon-checkbox-on,
.ui-icon-radio-off,
.ui-icon-radio-on
{
background-image: url(images/icons-36-white.png);
-moz-background-size: 776px 18px;
-o-background-size: 776px 18px;
-webkit-background-size: 776px 18px;
background-size: 776px 18px;
}
.ui-icon-alt
{
background-image: url(images/icons-36-black.png);
}
}
and when I comment these three lines the arrow appears again (so the problem is gone):
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-resolution: 240dpi)
{
.ui-icon-plus,
.ui-icon-minus,
.ui-icon-delete,
.ui-icon-arrow-r,
.ui-icon-arrow-l,
.ui-icon-arrow-u,
.ui-icon-arrow-d,
.ui-icon-check,
.ui-icon-gear,
.ui-icon-refresh,
.ui-icon-forward,
.ui-icon-back,
.ui-icon-grid,
.ui-icon-star,
.ui-icon-alert,
.ui-icon-info,
.ui-icon-home,
.ui-icon-search,
.ui-icon-checkbox-off,
.ui-icon-checkbox-on,
.ui-icon-radio-off,
.ui-icon-radio-on
{
/*
background-image: url(images/icons-36-white.png);
*/
-moz-background-size: 776px 18px;
-o-background-size: 776px 18px;
/*
-webkit-background-size: 776px 18px;
background-size: 776px 18px;
*/
}
.ui-icon-alt
{
background-image: url(images/icons-36-black.png);
}
}
If I uncomment any of these three lines the arrow disappears (the problem comes back again).
This happens both in the standard browser as well in the dolphin browser I installed.
I do not have the problem in a desktop browser or on an ipad (that is safari).
So I can get rid of the problem by changing
<link rel="stylesheet" href="../jquery.mobile-1.0a4.min.css" />
to
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
or by making the changes described above.
I do not understand anything of it. Anybody does?
Samsung Galaxy Tab Model GT-P1000. Firmware version 2.2
Baseband: P1000XXJID
Kernel: 2.6.32.9 root@SE-S611 #1
Buildnumber: FROYO.XWJJ3