Opened 5 years ago
Last modified 3 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 )
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)
Change History (8)
Changed 5 years ago by
Attachment: | misaligned label circle Radio Button IE11Win7.jpg added |
---|
comment:2 Changed 5 years ago by
Owner: | changed from Patrick Ruzand to Adrian Vasiliu |
---|---|
Status: | new → assigned |
comment:3 Changed 5 years ago by
Description: | modified (diff) |
---|
comment:4 Changed 5 years ago by
Description: | modified (diff) |
---|
comment:5 Changed 5 years ago by
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.
comment:6 Changed 4 years ago by
Milestone: | tbd → 1.13 |
---|
comment:7 Changed 3 years ago by
Milestone: | 1.13 → 1.14 |
---|
Screenshot of misalignment issue on IE11 / Win7