dojox/mobile/RadioButton: circle misaligned with label on some browsers

[Adrian Vasiliu]

The rendering of dojox/mobile/RadioButton shows in some browsers a vertical misalignment between the circle of each radio and the label near it. This holds regardless the selection state of the radio button. See attached screenshot.

How to reproduce: open for instance dojox/mobile/tests/testFormLayout.html and check the rendering of the RadioButton?.

Reproduced with current 1.10 branch (future 1.10.5) but also with Dojo 1.10.1 on :

• IE11 / Win7
• FF 38.5 / Win7
• FF 45.0.2 / Mac OS X 10.11.4

For comparison, the issue does NOT hurt Chrome 48 / Win7, Chrome 49 / Mac OS X 10.11.4, Safari / Mac OS X 10.11.4.

[Adrian Vasiliu]

Screenshot of misalignment issue on IE11 / Win7

[Adrian Vasiliu]

See also #18814.

[Adrian Vasiliu]

The cause of this misalignment seems to due to the use, in the css, of the following:

1) (-prefix-)appearance: none

and

2) (-prefix-)transform: translateY(0.45em)

while the support in browsers of -prefix-)appearance: none is quite heterogenous... (the property is non-standard and widely discouraged).

The reason of using each:

(-prefix-)appearance: none as a mean to get rid of native rendering

(-prefix-)transform: translateY(0.45em) as a mean to compensate the effect IN SOME BROWSERS of (-prefix-)appearance: none...

The trouble being that, for instance, in FF (-prefix-)appearance: none does not produce a translation (while in Chrome it does), hence the "compensation" using translateY has the undesired effect of the misalignment...

Conditionally using the translateY depending on browser would seem a fragile and ugly workaround. Instead, I tentatively rebuild RadioButton?'s CSS by taking inspiration from deliteful's RadioButton?, that is getting rid of appearance: none. This should still ensure a consistent cross-browser rendering. This may also solve #18814.