148675 2015-09-01 06:51:53 -0700 Can’t arbitrarily resize radios / checkboxes 2022-07-31 21:57:34 -0700 1 1 1 Unclassified WebKit Forms Safari 9 Mac OS X 10.11 NEW InRadar P2 Normal --- 1 robin webkit-unassigned akeerthi ap dino jonlee karlcow lea martin simon.fraser tom.byers webkit-bug-importer wenson_hsieh oldest_to_newest 1122524 0 robin 2015-09-01 06:51:53 -0700 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. 1122526 1 robin 2015-09-01 07:22:19 -0700 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? 1122527 2 260362 robin 2015-09-01 07:30:29 -0700 Created attachment 260362 Radio / checkbox resizing testcase 1122773 3 ap 2015-09-01 22:33:04 -0700 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. 1122798 4 robin 2015-09-02 01:13:23 -0700 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. 1264235 5 webkit-bug-importer 2017-01-05 14:21:53 -0800 <rdar://problem/29889889> 260362 2015-09-01 07:30:29 -0700 2015-09-01 07:30:29 -0700 Radio / checkbox resizing testcase input_test.html text/html 3447 robin PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CjxtZXRhIGNoYXJzZXQ9InV0 Zi04IiAvPgo8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRo LCBpbml0aWFsLXNjYWxlPTEsIG1heGltdW0tc2NhbGU9MSwgdXNlci1zY2FsYWJsZT0wIj4KPHN0 eWxlPgp0ZCB7IHRleHQtYWxpZ246IGxlZnQ7IGZvbnQtZmFtaWx5OiBzYW5zLXNlcmlmOyB9Cmlu cHV0IHsgbWFyZ2luOiAwOyB9Cjwvc3R5bGU+CjwvaGVhZD4KPGJvZHk+Cgo8dGFibGU+Cjx0cj48 dGQ+PGlucHV0IHR5cGU9InJhZGlvIiBzdHlsZT0id2lkdGg6NXB4O2hlaWdodDo1cHg7IiAvPjwv dGQ+PHRkPjxpbnB1dCB0eXBlPSJjaGVja2JveCIgc3R5bGU9IndpZHRoOjVweDtoZWlnaHQ6NXB4 OyIgLz48L3RkPjx0ZD48aW5wdXQgdHlwZT0icmFkaW8iIGNoZWNrZWQgc3R5bGU9IndpZHRoOjVw eDtoZWlnaHQ6NXB4OyIgLz48L3RkPjx0ZD48aW5wdXQgdHlwZT0iY2hlY2tib3giIGNoZWNrZWQg c3R5bGU9IndpZHRoOjVweDtoZWlnaHQ6NXB4OyIgLz48L3RkPjx0ZD41cHgmbmJzcDvDlyZuYnNw OzVweDwvdGQ+PC90cj4KPHRyPjx0ZD48aW5wdXQgdHlwZT0icmFkaW8iIHN0eWxlPSJ3aWR0aDox MHB4O2hlaWdodDoxMHB4OyIgLz48L3RkPjx0ZD48aW5wdXQgdHlwZT0iY2hlY2tib3giIHN0eWxl PSJ3aWR0aDoxMHB4O2hlaWdodDoxMHB4OyIgLz48L3RkPjx0ZD48aW5wdXQgdHlwZT0icmFkaW8i IGNoZWNrZWQgc3R5bGU9IndpZHRoOjEwcHg7aGVpZ2h0OjEwcHg7IiAvPjwvdGQ+PHRkPjxpbnB1 dCB0eXBlPSJjaGVja2JveCIgY2hlY2tlZCBzdHlsZT0id2lkdGg6MTBweDtoZWlnaHQ6MTBweDsi IC8+PC90ZD48dGQ+MTBweCZuYnNwO8OXJm5ic3A7MTBweDwvdGQ+PC90cj4KPHRyPjx0ZD48aW5w dXQgdHlwZT0icmFkaW8iIHN0eWxlPSJ3aWR0aDoxNXB4O2hlaWdodDoxNXB4OyIgLz48L3RkPjx0 ZD48aW5wdXQgdHlwZT0iY2hlY2tib3giIHN0eWxlPSJ3aWR0aDoxNXB4O2hlaWdodDoxNXB4OyIg Lz48L3RkPjx0ZD48aW5wdXQgdHlwZT0icmFkaW8iIGNoZWNrZWQgc3R5bGU9IndpZHRoOjE1cHg7 aGVpZ2h0OjE1cHg7IiAvPjwvdGQ+PHRkPjxpbnB1dCB0eXBlPSJjaGVja2JveCIgY2hlY2tlZCBz dHlsZT0id2lkdGg6MTVweDtoZWlnaHQ6MTVweDsiIC8+PC90ZD48dGQ+MTVweCZuYnNwO8OXJm5i c3A7MTVweDwvdGQ+PC90cj4KPHRyPjx0ZD48aW5wdXQgdHlwZT0icmFkaW8iIHN0eWxlPSJ3aWR0 aDoyMHB4O2hlaWdodDoyMHB4OyIgLz48L3RkPjx0ZD48aW5wdXQgdHlwZT0iY2hlY2tib3giIHN0 eWxlPSJ3aWR0aDoyMHB4O2hlaWdodDoyMHB4OyIgLz48L3RkPjx0ZD48aW5wdXQgdHlwZT0icmFk aW8iIGNoZWNrZWQgc3R5bGU9IndpZHRoOjIwcHg7aGVpZ2h0OjIwcHg7IiAvPjwvdGQ+PHRkPjxp bnB1dCB0eXBlPSJjaGVja2JveCIgY2hlY2tlZCBzdHlsZT0id2lkdGg6MjBweDtoZWlnaHQ6MjBw eDsiIC8+PC90ZD48dGQ+MjBweCZuYnNwO8OXJm5ic3A7MjBweDwvdGQ+PC90cj4KPHRyPjx0ZD48 aW5wdXQgdHlwZT0icmFkaW8iIHN0eWxlPSJ3aWR0aDoyNXB4O2hlaWdodDoyNXB4OyIgLz48L3Rk Pjx0ZD48aW5wdXQgdHlwZT0iY2hlY2tib3giIHN0eWxlPSJ3aWR0aDoyNXB4O2hlaWdodDoyNXB4 OyIgLz48L3RkPjx0ZD48aW5wdXQgdHlwZT0icmFkaW8iIGNoZWNrZWQgc3R5bGU9IndpZHRoOjI1 cHg7aGVpZ2h0OjI1cHg7IiAvPjwvdGQ+PHRkPjxpbnB1dCB0eXBlPSJjaGVja2JveCIgY2hlY2tl ZCBzdHlsZT0id2lkdGg6MjVweDtoZWlnaHQ6MjVweDsiIC8+PC90ZD48dGQ+MjVweCZuYnNwO8OX Jm5ic3A7MjVweDwvdGQ+PC90cj4KPHRyPjx0ZD48aW5wdXQgdHlwZT0icmFkaW8iIHN0eWxlPSJ3 aWR0aDozMHB4O2hlaWdodDozMHB4OyIgLz48L3RkPjx0ZD48aW5wdXQgdHlwZT0iY2hlY2tib3gi IHN0eWxlPSJ3aWR0aDozMHB4O2hlaWdodDozMHB4OyIgLz48L3RkPjx0ZD48aW5wdXQgdHlwZT0i cmFkaW8iIGNoZWNrZWQgc3R5bGU9IndpZHRoOjMwcHg7aGVpZ2h0OjMwcHg7IiAvPjwvdGQ+PHRk PjxpbnB1dCB0eXBlPSJjaGVja2JveCIgY2hlY2tlZCBzdHlsZT0id2lkdGg6MzBweDtoZWlnaHQ6 MzBweDsiIC8+PC90ZD48dGQ+MzBweCZuYnNwO8OXJm5ic3A7MzBweDwvdGQ+PC90cj4KPHRyPjx0 ZD48aW5wdXQgdHlwZT0icmFkaW8iIHN0eWxlPSJ3aWR0aDozNXB4O2hlaWdodDozNXB4OyIgLz48 L3RkPjx0ZD48aW5wdXQgdHlwZT0iY2hlY2tib3giIHN0eWxlPSJ3aWR0aDozNXB4O2hlaWdodDoz NXB4OyIgLz48L3RkPjx0ZD48aW5wdXQgdHlwZT0icmFkaW8iIGNoZWNrZWQgc3R5bGU9IndpZHRo OjM1cHg7aGVpZ2h0OjM1cHg7IiAvPjwvdGQ+PHRkPjxpbnB1dCB0eXBlPSJjaGVja2JveCIgY2hl Y2tlZCBzdHlsZT0id2lkdGg6MzVweDtoZWlnaHQ6MzVweDsiIC8+PC90ZD48dGQ+MzVweCZuYnNw O8OXJm5ic3A7MzVweDwvdGQ+PC90cj4KPHRyPjx0ZD48aW5wdXQgdHlwZT0icmFkaW8iIHN0eWxl PSJ3aWR0aDo0MHB4O2hlaWdodDo0MHB4OyIgLz48L3RkPjx0ZD48aW5wdXQgdHlwZT0iY2hlY2ti b3giIHN0eWxlPSJ3aWR0aDo0MHB4O2hlaWdodDo0MHB4OyIgLz48L3RkPjx0ZD48aW5wdXQgdHlw ZT0icmFkaW8iIGNoZWNrZWQgc3R5bGU9IndpZHRoOjQwcHg7aGVpZ2h0OjQwcHg7IiAvPjwvdGQ+ PHRkPjxpbnB1dCB0eXBlPSJjaGVja2JveCIgY2hlY2tlZCBzdHlsZT0id2lkdGg6NDBweDtoZWln aHQ6NDBweDsiIC8+PC90ZD48dGQ+NDBweCZuYnNwO8OXJm5ic3A7NDBweDwvdGQ+PC90cj4KPHRy Pjx0ZD48aW5wdXQgdHlwZT0icmFkaW8iIHN0eWxlPSJ3aWR0aDo0NXB4O2hlaWdodDo0NXB4OyIg Lz48L3RkPjx0ZD48aW5wdXQgdHlwZT0iY2hlY2tib3giIHN0eWxlPSJ3aWR0aDo0NXB4O2hlaWdo dDo0NXB4OyIgLz48L3RkPjx0ZD48aW5wdXQgdHlwZT0icmFkaW8iIGNoZWNrZWQgc3R5bGU9Indp ZHRoOjQ1cHg7aGVpZ2h0OjQ1cHg7IiAvPjwvdGQ+PHRkPjxpbnB1dCB0eXBlPSJjaGVja2JveCIg Y2hlY2tlZCBzdHlsZT0id2lkdGg6NDVweDtoZWlnaHQ6NDVweDsiIC8+PC90ZD48dGQ+NDVweCZu YnNwO8OXJm5ic3A7NDVweDwvdGQ+PC90cj4KPHRyPjx0ZD48aW5wdXQgdHlwZT0icmFkaW8iIHN0 eWxlPSJ3aWR0aDo1MHB4O2hlaWdodDo1MHB4OyIgLz48L3RkPjx0ZD48aW5wdXQgdHlwZT0iY2hl Y2tib3giIHN0eWxlPSJ3aWR0aDo1MHB4O2hlaWdodDo1MHB4OyIgLz48L3RkPjx0ZD48aW5wdXQg dHlwZT0icmFkaW8iIGNoZWNrZWQgc3R5bGU9IndpZHRoOjUwcHg7aGVpZ2h0OjUwcHg7IiAvPjwv dGQ+PHRkPjxpbnB1dCB0eXBlPSJjaGVja2JveCIgY2hlY2tlZCBzdHlsZT0id2lkdGg6NTBweDto ZWlnaHQ6NTBweDsiIC8+PC90ZD48dGQ+NTBweCZuYnNwO8OXJm5ic3A7NTBweDwvdGQ+PC90cj4K PC90YWJsZT4KCgo8L2JvZHk+CjwvaHRtbD4K