Opened 7 years ago

Closed 7 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:

  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.

Attachments (1)

renderingInFF(left)vsIE9(right).jpg (22.7 KB) - added by Adrian Vasiliu 7 years ago.
Comparison of the rendering in FF10 (left) vs IE9 (right)

Download all attachments as: .zip

Change History (3)

Changed 7 years ago by Adrian Vasiliu

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

comment:1 Changed 7 years ago by ykami

Milestone: tbd1.8
Priority: undecidedlow
Status: newassigned

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

comment:2 Changed 7 years ago by ykami

Resolution: fixed
Status: assignedclosed

In [28243]:

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

Note: See TracTickets for help on using tickets.