Opened 9 years ago
Closed 9 years ago
#15017 closed defect (fixed)
dojox.mobile.Badge: rendering broken in IE9 (dojo 1.8)
Reported by: | Adrian Vasiliu | Owned by: | ykami |
---|---|---|---|
Priority: | low | Milestone: | 1.8 |
Component: | DojoX Mobile | Version: | |
Keywords: | Cc: | ||
Blocked By: | Blocking: |
Description
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:
- 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.
Attachments (1)
Change History (3)
Changed 9 years ago by
Attachment: | renderingInFF(left)vsIE9(right).jpg added |
---|
comment:1 Changed 9 years ago by
Milestone: | tbd → 1.8 |
---|---|
Priority: | undecided → low |
Status: | new → assigned |
Thanks Adrian for the report. I confirmed the problem. I think background-color is fine for now.
Comparison of the rendering in FF10 (left) vs IE9 (right)