rays/ipodderx-app
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

The zoomed page fills the window again (width was divided twice)

Browse Source 
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:
Ray Slakinski
2026-09-19 19:49:44 -04:00
parent 5f8cb6abc2
commit aa91b457bb
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
ios/Sources/WebViewController.swift
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 /// 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. /// and height are divided back out because its containing block is not zoomed.
static func script(_ zoom: Double) -> String { static func script(_ zoom: Double) -> String {
let css = zoom == 1 // 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
: "body{zoom:\(zoom);width:calc(100%/\(zoom))!important;" // the page filling four fifths of the window and then three fifths as the zoom went
+ "height:calc(100dvh/\(zoom))!important}" // 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);" return "(function(){var id='ipx-zoom';var s=document.getElementById(id);"
+ "if(!s){s=document.createElement('style');s.id=id;" + "if(!s){s=document.createElement('style');s.id=id;"
+ "(document.head||document.documentElement).appendChild(s)}" + "(document.head||document.documentElement).appendChild(s)}"