NEW 265869
"rem" and "zoom" affect sizing calculations 
https://bugs.webkit.org/show_bug.cgi?id=265869
Summary "rem" and "zoom" affect sizing calculations
Evgenii
Reported 2023-12-05 05:53:53 PST
Created attachment 468886 [details] Zoom 0.5, padding 1rem I've discovered an issue with the Safari mobile browser regarding the sizing of elements inside a container with the CSS property 'zoom'. I'm using 'rem' units for sizing. For instance, the 'html' element has a 'font-size' of 16px, and a child div element has 'padding: 1rem'. It's contained within a container with 'zoom: 0.5'. In a normal scenario, when converted to pixels, the padding should be 16px, but it turns out to be 32px. It seems like the browser, during size calculation, uses the formula 'font-size = 1rem (16px) / zoom (0.5) = 32px.' On the desktop this bug doesn't exist. I'm attaching several examples illustrating different browser behaviour with the use of px, rem, and zoom. Screenshots are taken from IOS emulator, but it works the same on the real device. html for reproduction: <html style="font-size: 16px"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> </head> <body> <div style="zoom: 0.5"> <div style="padding: 1rem"> <h1>Test</h1> </div> </div> </body> </html> link to codesandbox example: https://m2dljn.csb.app/
Attachments
Zoom 0.5, padding 1rem (1.38 MB, image/png)
2023-12-05 05:53 PST, Evgenii 		no flags
Details
zoom 1, padding 1rem (1.46 MB, image/png)
2023-12-05 05:54 PST, Evgenii 		no flags
Details
zoom 2, padding 1rem (1.35 MB, image/png)
2023-12-05 05:55 PST, Evgenii 		no flags
Details
zoom 0.5, padding 16px (1.37 MB, image/png)
2023-12-05 05:56 PST, Evgenii 		no flags
Details
zoom 0.5, padding 1rem, desktop (343.21 KB, image/png)
2023-12-05 05:56 PST, Evgenii 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Evgenii
Comment 1 2023-12-05 05:54:58 PST
Created attachment 468887 [details] zoom 1, padding 1rem
Evgenii
Comment 2 2023-12-05 05:55:52 PST
Created attachment 468888 [details] zoom 2, padding 1rem
Evgenii
Comment 3 2023-12-05 05:56:21 PST
Created attachment 468889 [details] zoom 0.5, padding 16px
Evgenii
Comment 4 2023-12-05 05:56:50 PST
Created attachment 468890 [details] zoom 0.5, padding 1rem, desktop
Radar WebKit Bug Importer
Comment 5 2023-12-12 05:54:16 PST
<rdar://problem/119551652>
Note You need to log in before you can comment on or make changes to this bug.