jQuery Mobile + IE 9 Rendering Issues

As noted by the jQuery Mobile team below there are issues with IE9 and jQuery mobile, where the background gradients and the border radius cause some nasty looking UI issues. You will notice that the gradient does not respect the border radius. This should be fixed within the next couple weeks as they release beta 2, but in the interim, I took the liberty of gathering all the necessary css classes and removing the filters. Below is the code to remove these filters, which makes things less “fancy”, however, it is the solution that the jQuery Mobile team has decided to implement and it looks a lot better than before!


.ui-body-a,
.ui-btn-up-a,
.ui-btn-hover-a,
.ui-btn-down-a,
.ui-bar-b,
.ui-body-b,
.ui-btn-up-b,
.ui-btn-hover-b,
.ui-btn-down-b,
.ui-bar-c,
.ui-body-c,
.ui-btn-up-c,
.ui-btn-hover-c,
.ui-btn-down-c,
.ui-bar-d,
.ui-body-d,
.ui-btn-up-d,
.ui-btn-hover-d,
.ui-btn-down-d,
.ui-bar-e,
.ui-body-e,
.ui-btn-up-e,
.ui-btn-hover-e,
.ui-btn-down-e
{
filter: none !important;
}


More from the jQuery Mobile team…

http://jquerymobile.com/blog/2011/07/08/jquery-mobile-team-update-week-of-july-4th/