dojox.mobile.Badge: rendering broken in IE9 (dojo 1.8)

[Adrian Vasiliu]

The rendering of dojox.mobile.Badge is broken in IE9. This holds for dojo-trunk as of 14 March 2012 (dojo 1.8).

How to reproduce:

1. Launch dojox/mobile/tests/test_Badge.html from dojo-trunk in IE9.

=> The badges have no filling (while they are filld with green, red, or blue in FF, Chrome, and various mobile browsers). See the attached screenshot which compares the rendering in FF10 and IE9.

===

The CSS files of dojox.mobile.Badge (one per color) : dojox/mobile/themes/common/domButtons/DomButton<colorname>Badge.css specify filling the badge with a gradient. This works fine in FF and Chrome, and various mobile devices. But in IE9 the gradient fill is not rendered.

I tried adding this to the css: filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ba2e7', endColorstr='#216dd6',GradientType?=0 ); I'm not sure this is the perfect solution but it did make the gradient appear in IE9. But then we fall into the trouble with round corners on IE9: the gradient filling is rectangular while the badge has rounded corners. A google search shows various solutions. I would think the solution using an intermediate div for the rounding and a child div for the gradient with overflow:hidden would be the simplest, but this needs to be confirmed.

[Adrian Vasiliu]

Comparison of the rendering in FF10 (left) vs IE9 (right)

[ykami]

Thanks Adrian for the report. I confirmed the problem. I think background-color is fine for now.

[ykami]

In [28243]:

Fixes #15017 !strict. Added background-color to the compat files of the badges for IE.