Opened 13 years ago

Closed 11 years ago

Last modified 10 years ago

#5787 closed bug (worksforme)

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:


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 with the text size increased 3 to 4 times.

Change History (5)

comment:1 Changed 13 years ago by watanabe

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) ?

comment:2 in reply to:  1 Changed 13 years ago by watanabe

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

may work.

comment:3 Changed 13 years ago by joshua.ganes

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

comment:4 Changed 11 years ago by Jörn Zaefferer

Resolution: worksforme
Status: newclosed

Worksforme, Chrome got a long way:

comment:5 Changed 10 years ago by Scott González

Milestone: TBD

Milestone TBD deleted

Note: See TracTickets for help on using tickets.