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 <noreply@anthropic.com>
This commit is contained in:
2026-09-19 19:49:44 -04:00
parent 5f8cb6abc2
commit aa91b457bb

View File

@@ -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)}"