WKWebView PDF Export Provides Surprising White Area at Prime

October 7, 2025

14

I am utilizing WKWebView in iOS to render HTML after which export it as a PDF utilizing UIPrintPageRenderer. Nevertheless, after I generate the PDF, there is a small white house on the high of the web page that I can not seem to take away, though my HTML and CSS set all margins and paddings to 0.

Swift Code (PDF Technology):

func saveToPdf(wKWebView: WKWebView, fileName: String) -> String {

    let printFormatter = wKWebView.viewPrintFormatter()
    let renderer = UIPrintPageRenderer()
    renderer.addPrintFormatter(printFormatter, startingAtPageAt: 0)

    // A4 Measurement (in factors): 595.2 x 841.8
    let pageSize = CGSize(width: 595.2, top: 841.8)


    // Setup the web page rect and printable rect
    let paperRect = CGRect(x: 0, y: 0, width: pageSize.width, top: pageSize.top)
    let printableRect = CGRect(x: 0,
                               y: 0,
                               width: pageSize.width,
                               top: pageSize.top)

    // Set worth utilizing KVC
    renderer.setValue(NSValue(cgRect: paperRect), forKey: "paperRect")
    renderer.setValue(NSValue(cgRect: printableRect), forKey: "printableRect")

    // Render the PDF
    let pdfData = NSMutableData()
    UIGraphicsBeginPDFContextToData(pdfData, paperRect, nil)

    for i in 0..<renderer.numberOfPages {
        UIGraphicsBeginPDFPage()
        renderer.drawPage(at: i, in: UIGraphicsGetPDFContextBounds())
    }

    UIGraphicsEndPDFContext()

    // Save PDF file to paperwork listing
    let documentsPath = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask).first!
    let pdfFilePath = documentsPath.appendingPathComponent("(fileName).pdf")

    do {
        strive pdfData.write(to: pdfFilePath, choices: .atomic)
        print("PDF saved to: (pdfFilePath.path)")
        return pdfFilePath.path
    } catch {
        print("Couldn't save PDF file: (error)")
        return ""
    }
}

HTML/CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <type>
        html, physique, * {
            margin: 0;
            padding: 0;
            -webkit-print-color-adjust: actual !essential;
        }

        physique {
            background-color: #0abdaf;
        }

        .container {
            width: 100%;
            top: 100%;
            background-color: #df0c0c;
        }
    </type>
</head>
<physique>
    <div class="container">
        <div type="width: 100px; top: 100px; background-color: #6c10c1;"></div>
    </div>
</physique>
</html>

Right here is problem visually in remaining saved PDF.