Bug 265869

Summary:

"rem" and "zoom" affect sizing calculations

Product:

WebKit

Reporter:

Evgenii <mrjcrunch>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Blocker

CC:

bfulgham, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari 17

Hardware:

iPhone / iPad

OS:

iOS 17

Attachments:

Description	Flags
Zoom 0.5, padding 1rem	none
zoom 1, padding 1rem	none
zoom 2, padding 1rem	none
zoom 0.5, padding 16px	none
zoom 0.5, padding 1rem, desktop	none

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.