Opened 4 years ago

Last modified 2 years ago

#18815 assigned defect

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

Reported by: Adrian Vasiliu Owned by: Adrian Vasiliu
Priority: undecided Milestone: 1.14
Component: DojoX Mobile Version: 1.10.1
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by 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.

Attachments (1)

misaligned label circle Radio Button IE11Win7.jpg (1.6 KB) - added by Adrian Vasiliu 4 years ago.
Screenshot of misalignment issue on IE11 / Win7

Download all attachments as: .zip

Change History (8)

Changed 4 years ago by Adrian Vasiliu

Screenshot of misalignment issue on IE11 / Win7

comment:1 Changed 4 years ago by Adrian Vasiliu

See also #18814.

comment:2 Changed 4 years ago by Adrian Vasiliu

Owner: changed from Patrick Ruzand to Adrian Vasiliu
Status: newassigned

comment:3 Changed 4 years ago by Adrian Vasiliu

Description: modified (diff)

comment:4 Changed 4 years ago by Adrian Vasiliu

Description: modified (diff)

comment:5 Changed 4 years ago by 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.

Last edited 4 years ago by Adrian Vasiliu (previous) (diff)

comment:6 Changed 3 years ago by dylan

Milestone: tbd1.13

comment:7 Changed 2 years ago by dylan

Milestone: 1.131.14
Note: See TracTickets for help on using tickets.