[Webkit-unassigned] [Bug 265869] New: "rem" and "zoom" affect sizing calculations

Tue Dec 5 05:53:53 PST 2023

https://bugs.webkit.org/show_bug.cgi?id=265869

            Bug ID: 265869
           Summary: "rem" and "zoom" affect sizing calculations
           Product: WebKit
           Version: Safari 17
          Hardware: iPhone / iPad
                OS: iOS 17
            Status: NEW
          Severity: Blocker
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: mrjcrunch at gmail.com

Created attachment 468886

  --> https://bugs.webkit.org/attachment.cgi?id=468886&action=review

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/

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20231205/c34f88d8/attachment.htm>