Swift: смещается контент при горизонтально прокрутке

У меня есть этот код, чтобы показать мой html-файл (это книга) в моем WKWebView:

do {
    guard let filePath = Bundle.main.path(forResource: "0", ofType: "html")
        else {
            print ("File reading error")
                return
            }
    var content =  try String(contentsOfFile: filePath, encoding: .utf8)
    let baseUrl = URL(fileURLWithPath: filePath)
            
    content.changeHtmlStyle(font: "Iowan-Old-Style", fontSize: 4, fontColor: "black")
    webView.loadHTMLString(headerString+content, baseURL: baseUrl)
}
catch {
    print ("File HTML error")
}

также у меня есть это:

webView.scrollView.isPagingEnabled = true

чтобы прокручивать страницы как в электронной книге.

Но если у меня около 800 страниц и я прокручиваю дальше и дальше к последней странице, я получу такой результат:

Мой контент отображается со странным смещением. На первой странице все работает нормально. Но чем дальше я прикручиваю, тем больше становится смещение.

enter image description here

Но я хочу чтобы любая страница выглядела ровно, вот так:

enter image description here

Почему это происходит и как это исправить?

Код из .css

body {
    hyphens:auto;
    -webkit-hyphens:auto;
    -webkit-hyphenate-character:"\2010";
    -webkit-hyphenate-limit-after:1;
    -webkit-hyphenate-limit-before:3;
    -moz-hyphens:auto;
    overflow: -webkit-paged-x !important;
    direction: ltr !important;
    margin-left: 20;
    margin-right: 20;
    color: var(--title-color);
}
.a {
    font-size: 0.75em;
    line-height: 1.2;
    vertical-align: super
    }
.p {
    display: block;
    line-height: 1.2;
    margin-bottom: 0.5em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    text-align: inherit;
    text-indent: 0
    }
.p1 {
    display: block;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    text-align: justify;
    text-indent: 1.5em
    }
.title {
    display: block;
    font-size: 1.8em;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 0.5em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1em;
    page-break-after: avoid;
    page-break-inside: avoid;
    text-align: center
    }
.title1 {
    display: block;
    font-size: 1.8em;
    font-weight: bold;
    line-height: 1.2;
    margin-bottom: 0.5em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1em;
    page-break-after: avoid;
    page-break-inside: avoid;
    text-align: center
    }
.z {
    display: block;
    font-family: "Iowan Old Style", serif;
    font-size: 1em;
    margin-bottom: 0;
    margin-left: 5pt;
    margin-right: 5pt;
    margin-top: 0;
    padding-left: 0;
    padding-right: 0
    }

@page {
    margin-bottom: 5pt;
    margin-top: 5pt
    }
@font-face {
    font-family: "Iowan Old Style";
    font-style: normal;
    font-weight: normal;
    }
@font-face {
    font-family: "Iowan Old Style";
    font-style: normal;
    font-weight: bold;
    }
@font-face {
    font-family: "Iowan Old Style";
    font-style: normal;
    font-weight: normal;
    }
@font-face {
    font-family: "Iowan Old Style";
    font-style: normal;
    font-weight: bold;
    }

Ответы (0 шт):