#5787 closed bug (worksforme)

Opened June 30, 2010 09:25PM UTC

Closed February 27, 2012 01:46PM UTC

Last modified October 11, 2012 09:15PM UTC

Google Chrome radio buttonset() with large fonts displays poorly

Reported by: joshua.ganes Owned by:
Priority: minor Milestone:
Component: ui.button Version: 1.8.2
Keywords: Cc:
Blocked by: Blocking:
Description

Google Chrome does not render a radio button button set properly when the font size is sufficiently large. Instead of nicely formatted buttons in a group, we see the circular portion of the native radio button control peeking out the side of the button group.

See http://jqueryui.com/demos/button/radio.html with the text size increased 3 to 4 times.

Attachments (0)
Change History (5)

Changed July 01, 2010 10:22AM UTC by watanabe comment:1

in jquery.ui.core.css,

 .ui-helper-hidden-accessible {
  position: absolute;
  left: -99999999px;
 }

in Google Chrome / Developer Tools / Computed Style,

you can find the 'left' value.

  • 100% -> -1e+008px (nearly equals to -99999999px)
  • zoom * 1 -> -1.2e+008px
  • zoom * 2 -> 0px (overflow?)

because 1.44e+008 >= Math.pow(2, 27) ?

Changed July 01, 2010 10:40AM UTC by watanabe comment:2

  • Math.pow(1.2,6) = 2.9859839999999993
  • Math.pow(2,27) / 3 = 44739242.666666664
 .ui-helper-hidden-accessible {
  position: absolute;
  left: -44739242px;
 }

may work.

Changed July 02, 2010 08:33PM UTC by joshua.ganes comment:3

I tried this without success. As a workaround, I've made a custom css rule for "ui-buttonset input" for my own site.

Changed February 27, 2012 01:46PM UTC by jzaefferer comment:4

resolution: → worksforme
status: new → closed

Worksforme, Chrome got a long way: http://bassistance.de/i/b7ea57.png

Changed October 11, 2012 09:15PM UTC by scottgonzalez comment:5

milestone: TBD

Milestone TBD deleted