Bug 150373

Summary:

Radio buttons scale incorrectly on zoom in El Capitan

Product:

WebKit

Reporter:

Johnny Rodgers <johnny>

Component:

Forms

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

ap, james.setaro, jonlee, wenson_hsieh

Priority:

Version:

Safari 9

Hardware:

Mac

OS:

OS X 10.11

Attachments:

Description	Flags
zoom 1 on left, zoom 0 on right	none
Unsettled radio buttons at 3 sizes	none
Radio buttons, zoom level 1 (<select> for reference)	none
Safari 9 radio button test zoom +1	none
Safari 9 radio button test zoom +2	none
Safari 9 radio button test zoom -1	none

Johnny Rodgers

Reported 2015-10-20 14:42:20 PDT

Created attachment 263618 [details] zoom 1 on left, zoom 0 on right In Safari 9 on El Capitan radio buttons render incorrectly when the page is zoomed. Unable to repro in other browsers. Affects multiple websites (GMail Settings shown in attached screenshot).

Attachments
zoom 1 on left, zoom 0 on right (459.92 KB, image/png) 2015-10-20 14:42 PDT, Johnny Rodgers	no flags	Details
Unsettled radio buttons at 3 sizes (275 bytes, text/html) 2015-10-21 10:36 PDT, Wenson Hsieh	no flags	Details
Radio buttons, zoom level 1 (<select> for reference) (13.96 KB, image/png) 2015-10-21 15:42 PDT, Wenson Hsieh	no flags	Details
Safari 9 radio button test zoom +1 (21.86 KB, image/png) 2015-10-21 20:25 PDT, Johnny Rodgers	no flags	Details
Safari 9 radio button test zoom +2 (23.71 KB, image/png) 2015-10-21 20:25 PDT, Johnny Rodgers	no flags	Details
Safari 9 radio button test zoom -1 (21.96 KB, image/png) 2015-10-21 20:26 PDT, Johnny Rodgers	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Wenson Hsieh

Comment 1 2015-10-20 22:55:02 PDT

Could not reproduce what was in the screenshot by visiting my Gmail settings page. Just to make sure, you are referring to zooming (using cmd +/-) rather than page scaling (using pinch to zoom) right?

Johnny Rodgers

Comment 2 2015-10-21 10:13:17 PDT

Yes, using cmd+ to zoom in. I can't repro on Safari 9 on Yosemite, but in El Capitan I get the bug as shown on two different installs and on two different websites (Slack and GMail).

Wenson Hsieh

Comment 3 2015-10-21 10:35:32 PDT

Hmm...still not able to reproduce the issue in the attached screenshot. Perhaps the radio buttons on the settings pages you're seeing have custom styles? I'm curious if this happens when zooming in on regular radio buttons -- I'll attach a test page in a bit (it'll just contain some plain radio buttons). Please let me know if they also exhibit the same clipping behavior as you saw in the Slack settings page. Thanks!

Wenson Hsieh

Comment 4 2015-10-21 10:36:27 PDT

Created attachment 263698 [details] Unsettled radio buttons at 3 sizes

Wenson Hsieh

Comment 5 2015-10-21 10:36:53 PDT

> Unsettled radio buttons at 3 sizes Whoops, that's *unstyled*

Johnny Rodgers

Comment 6 2015-10-21 11:48:20 PDT

Thanks Wenson. Afaict the radio buttons are unstyled, vanilla form controls.

Wenson Hsieh

Comment 7 2015-10-21 15:41:47 PDT

Interesting...I'm seeing something different on my machine (also El Capitan) after zooming to the first level (a single cmd+). I'm attached a screenshot of it for reference.

Wenson Hsieh

Comment 8 2015-10-21 15:42:29 PDT

Created attachment 263751 [details] Radio buttons, zoom level 1 (<select> for reference)

Johnny Rodgers

Comment 9 2015-10-21 20:25:19 PDT

Created attachment 263786 [details] Safari 9 radio button test zoom +1 Here's Safari 9 El Cap using the radio button test at zoom +1. This was repro'd on two different laptops.

Johnny Rodgers

Comment 10 2015-10-21 20:25:53 PDT

Created attachment 263787 [details] Safari 9 radio button test zoom +2 Here's Safari 9 El Cap using the radio button test at zoom +2.

Johnny Rodgers

Comment 11 2015-10-21 20:26:29 PDT

Created attachment 263788 [details] Safari 9 radio button test zoom -1 Here's Safari 9 El Cap using the radio button test at zoom -1.

Note You need to log in before you can comment on or make changes to this bug.