From aa91b457bb203e006a2a9f134804ade86f00abaa Mon Sep 17 00:00:00 2001 From: Ray Slakinski Date: Sat, 19 Sep 2026 19:49:44 -0400 Subject: [PATCH] The zoomed page fills the window again (width was divided twice) Zooming left the page filling four fifths of the window, and less as the zoom went up: at 1.6 it sat in the left three fifths with the rest of the window empty. body carried width:calc(100%/zoom). Under CSS zoom a percentage already resolves against the containing block in the zoomed element's own units, so 100% is the full width and dividing it again shrank the page by the zoom a second time. A block fills its container without being told to, so the declaration is gone. Viewport units are the exception -- dvh does not know about zoom -- which is why the height still has to be divided back out. Measured at 1.25, 1.6 and 2: body is exactly the window's 2275 by 1427 in each, and the document overflows by nothing in either direction. The first time round only the overflow was checked, which a page that under-fills passes just as happily as one that fits. Co-Authored-By: Claude Opus 5 --- ios/Sources/WebViewController.swift | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/ios/Sources/WebViewController.swift b/ios/Sources/WebViewController.swift index b046423..2e06a64 100644 --- a/ios/Sources/WebViewController.swift +++ b/ios/Sources/WebViewController.swift @@ -100,10 +100,12 @@ final class WebViewController: UIViewController, WKNavigationDelegate { /// CSS zoom is part of layout, so the page measures itself correctly; body's own width /// and height are divided back out because its containing block is not zoomed. static func script(_ zoom: Double) -> String { - let css = zoom == 1 - ? "" - : "body{zoom:\(zoom);width:calc(100%/\(zoom))!important;" - + "height:calc(100dvh/\(zoom))!important}" + // No width. A percentage resolves against the containing block in the zoomed + // element's own units, so 100% is already the full width -- dividing it again left + // the page filling four fifths of the window and then three fifths as the zoom went + // up. A block fills its container by itself. dvh is the exception: viewport units do + // not know about zoom, so the height does have to be divided back out. + let css = zoom == 1 ? "" : "body{zoom:\(zoom);height:calc(100dvh/\(zoom))!important}" return "(function(){var id='ipx-zoom';var s=document.getElementById(id);" + "if(!s){s=document.createElement('style');s.id=id;" + "(document.head||document.documentElement).appendChild(s)}"