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:
@@ -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)}"
|
||||
|
||||
Reference in New Issue
Block a user