Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#12530 closed defect (wontfix)

RadioButton: appears jagged when ancestor node has shadow class (IE8)

Reported by: Wouter Hager Owned by:
Priority: high Milestone: tbd
Component: Dijit - LnF Version: 1.6.0
Keywords: Cc: Douglas Hays
Blocked By: Blocking:

Description (last modified by bill)

The claro .dijitCheckBoxInput class for the dijit.form.RadioButton uses an opacity filter to hide the original html input field. It does not draw well (jagged) in IE8.

Attachments (1)

ie8radio.gif (7.3 KB) - added by bill 8 years ago.
on my machine

Download all attachments as: .zip

Change History (8)

comment:1 Changed 8 years ago by bill

Cc: Douglas Hays added
Component: GeneralDijit - LnF
Description: modified (diff)

It looks OK to me, maybe you have a better eye than me, or are you seeing something different than I am? Mine looks like:

on my machine

There were a couple reasons for the opacity filter rather than just hiding the native <input type=radio>:

  1. for the browser to catch clicks on the native radio button and automatically deselect other radio buttons (with the same name). But in the end we needed to do that operation in javascript anyway, I forget why.
  2. easier to get screen readers etc. working, if focus went to an <img> node (or a <span>) with a background image rather than to a <input type=radio> then we need various aria-... roles and states assigned to it

Changed 8 years ago by bill

Attachment: ie8radio.gif added

on my machine

comment:2 Changed 8 years ago by Wouter Hager

The problem seems to appear only when I try to load the radiobutton from xhr (as text) and set it as the content of a contentpane. More stuff seems broken in IE when I do this. Is there some startup requirement perhaps?

comment:3 Changed 8 years ago by Wouter Hager

I've discovered the cause. The radiobuttons inherited a shadow from a totally unrelated ancestor element. After all this time I'm just starting to discover the unfathomable intricacies of IE filters...

comment:4 Changed 8 years ago by bill

Resolution: wontfix
Status: newclosed
Summary: IE8 dijit.form.RadioButton claro CSSRadioButton: appears jagged when ancestor node has shadow class (IE8)

OK, I guess this is a wontfix. Probably there's some CSS we can add for checkbox/radio button to override any inherited shadow effect, but not sure if it's worth it for such an unusual case. You could just add it locally.

comment:5 Changed 8 years ago by Wouter Hager

I've already looked for a way to clear the filter on inherited elements in IE but no dice. A long & hard google search yielded several pointers but no working solutions. I have torn out the proprietary filters and hope my client won't notice...

comment:6 Changed 8 years ago by bill

Ah OK, I hope so too :-). That's a weird that you can't override an ancestor's setting. Or for that matter, that an ancestor's setting trickles down to descendant nodes.

comment:7 Changed 8 years ago by Wouter Hager

It's not weird it's IE ;) I couldn't find any consistency in the filter inheritance. For example, fonts don't get shadow unless the background is transparent (but they do change in shape). I don't have a lot of time to find out now. I wonder if anyone knows or has done some extensive testing. I'd like to stick to what I said: unfathomable. It would be valuable to put this up on the web somewhere.. perhaps for 9.

Note: See TracTickets for help on using tickets.