Bug 148675 – Can’t arbitrarily resize radios / checkboxes

• Component: Forms
• Status: NEW

[Robin Whittleton]

I did some research on how radios and checkboxes resize in various browsers: https://gdstechnology.blog.gov.uk/2015/08/27/making-radio-buttons-and-checkboxes-easier-to-use/

It appears that on OS X by default radios and checkboxes are fixed to either a normal or a small size (<14px). Screenshots:

Safari 8: https://gdstechnology.blog.gov.uk/wp-content/uploads/sites/31/2015/08/osx_10.10_safari.png
Safari 9: https://gdstechnology.blog.gov.uk/wp-content/uploads/sites/31/2015/08/osx_10.11_safari.png
Chrome: https://gdstechnology.blog.gov.uk/wp-content/uploads/sites/31/2015/08/osx_10.10_chrome.png

Firefox makes an attempt to resize if requested but looks blurry, presumably because it’s only using the one raster image:

https://gdstechnology.blog.gov.uk/wp-content/uploads/sites/31/2015/08/osx_10.10_firefox.png

It’s possible to get one size bigger by tricking Safari into using the @2x radio image using transform:scale(2), but this only seems to work on non-retina machines (see Lea Verou’s bug #58524).

It would be great to be able to resize radios and checkboxes to fit the text around them. Our workaround is to handroll custom inputs, but these require extra maintenance and only work for us rather than the whole development community. Is Webkit on OS X tied to raster inputs, and if so is there work in progress to update these to vectors and unlock the size?

It’s worth pointing out that Windows (desktop and mobile), Android and iOS all have vector widgets for checkboxes and radios; OS X is lagging here.

[Robin Whittleton]

Bug #147405 allows scaling of radios / checkboxes while pinch zooming, albeit with a blur due to the raster sources. Is this something that could be adopted for this issue?

[Robin Whittleton]

Created attachment 260362 [details]
Radio / checkbox resizing testcase

[Alexey Proskuryakov]

Isn't this just a duplicate of bug 147405? Shipping a newer WebKit as part of Safari is not something that we would track in Bugzilla.

[Robin Whittleton]

Not as far as I understand it. Pre bug #147405, Safari would not scale radios/checkboxes outside of the two default sizes (3 if on a non-retina screen as it treats the @2x asset as a third larger size). That bug changes the behavior such that regardless of zoom level radios / checkboxes remain at their ‘natural’ size (i.e. consistent with the size of the text).

This bug is an enhancement request to allow web developers to set a specific size for radios/checkboxes using CSS. On other platforms this is generally the default behaviour these days. For example, Edge on Windows 10 or Safari on iOS:

https://gdstechnology.blog.gov.uk/wp-content/uploads/sites/31/2015/08/win_10_edge.png
https://gdstechnology.blog.gov.uk/wp-content/uploads/sites/31/2015/08/ios_8_safari.png

The only browser to allow this behaviour on OS X is Firefox. Its implementation causes the radios/checkboxes to go slightly fuzzy at non-default sizes, something that could be amended a bit by scaling the @2x asset I guess. Either way, a little blurring is a small price to pay for the increased usability. If this issue can be fixed without blurring then even better.

[Radar WebKit Bug Importer]

<rdar://problem/29889889>