Opened 9 years ago

Closed 8 years ago

Last modified 7 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:

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.

Change History (5)

comment:1 Changed 9 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 9 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 9 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 8 years ago by Jörn Zaefferer

Resolution: worksforme
Status: newclosed

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

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

Milestone: TBD

Milestone TBD deleted

Note: See TracTickets for help on using tickets.